@nexus-cross/design-system 1.0.11 → 1.0.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunks/{chunk-CV4GMFWP.js → chunk-2WM23PO6.js} +5 -3
- package/dist/chunks/{chunk-XKJO5Y4J.mjs → chunk-5J63FUAS.mjs} +3 -3
- package/dist/chunks/{chunk-6J7TZ4GP.mjs → chunk-BQ6GJJB6.mjs} +1 -1
- package/dist/chunks/{chunk-P73MEU7N.mjs → chunk-HI5XZ4PB.mjs} +5 -3
- package/dist/chunks/{chunk-2XV3XP3Y.js → chunk-LAGQ7J5A.js} +3 -3
- package/dist/chunks/{chunk-7B2CTQKB.js → chunk-WXMMOQXZ.js} +1 -1
- package/dist/components/ImageUpload.d.ts.map +1 -1
- package/dist/components/ToggleGroup.d.ts +2 -0
- package/dist/components/ToggleGroup.d.ts.map +1 -1
- package/dist/image-upload.js +3 -3
- package/dist/image-upload.mjs +1 -1
- package/dist/index.js +6 -6
- package/dist/index.mjs +2 -2
- package/dist/schemas/_all.json +4 -0
- package/dist/schemas/toggle-group.d.ts +3 -0
- package/dist/schemas/toggle-group.d.ts.map +1 -1
- package/dist/schemas/toggleGroup.json +4 -0
- package/dist/schemas.js +1 -0
- package/dist/schemas.mjs +1 -0
- package/dist/styles/.generated/built.d.ts +1 -1
- package/dist/styles/.generated/built.d.ts.map +1 -1
- package/dist/styles/layer.js +2 -2
- package/dist/styles/layer.mjs +1 -1
- package/dist/styles.css +7 -4
- package/dist/styles.js +2 -2
- package/dist/styles.layered.css +7 -4
- package/dist/styles.mjs +1 -1
- package/dist/toggle-group.js +3 -3
- package/dist/toggle-group.mjs +1 -1
- package/package.json +2 -2
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// src/styles/.generated/built.ts
|
|
2
|
-
var css = "/*\n * @nexus-cross/design-system \u2014 Pure CSS\n *\n * BEM \uD074\uB798\uC2A4 \uB124\uC774\uBC0D(.nexus-*)\uC73C\uB85C CSS specificity \uAE30\uBC18 \uB3D9\uC791.\n * \uC18C\uBE44\uC790 CSS\uB294 \uB514\uC790\uC778 \uC2DC\uC2A4\uD15C \uC774\uD6C4\uC5D0 \uB85C\uB4DC\uB418\uBBC0\uB85C className\uC73C\uB85C \uC624\uBC84\uB77C\uC774\uB4DC \uAC00\uB2A5.\n */\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Component Tokens (:root)\n \uC18C\uBE44\uC790\uAC00 :root\uC5D0\uC11C \uC624\uBC84\uB77C\uC774\uB4DC \uAC00\uB2A5\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n:root {\n /* \u2500\u2500 Button: Color \u2500\u2500 */\n --color-comp-btn-focus-ring: var(--color-accent-primary);\n\n --color-comp-btn-primary-base: var(--color-accent-primary);\n --color-comp-btn-primary-hover: var(--color-accent-primary-hover);\n --color-comp-btn-primary-pressed: var(--color-accent-primary-pressed);\n --color-comp-btn-primary-on: var(--color-accent-on-primary);\n --color-comp-btn-primary-text: var(\n --color-accent-primary-intense,\n var(--color-accent-primary)\n );\n --color-comp-btn-primary-subtle-fill: var(--color-accent-primary-disabled);\n --color-comp-btn-primary-subtle-bg: var(--color-accent-primary-bg);\n\n --color-comp-btn-secondary-base: var(--color-accent-secondary);\n --color-comp-btn-secondary-hover: var(--color-accent-secondary-hover);\n --color-comp-btn-secondary-pressed: var(--color-accent-secondary-pressed);\n --color-comp-btn-secondary-on: var(--color-accent-on-secondary);\n --color-comp-btn-secondary-text: var(\n --color-accent-secondary-intense,\n var(--color-accent-secondary)\n );\n --color-comp-btn-secondary-subtle-fill: var(\n --color-accent-secondary-disabled\n );\n --color-comp-btn-secondary-subtle-bg: var(--color-accent-secondary-bg);\n\n --color-comp-btn-normal-base: var(--color-surface-subtle);\n --color-comp-btn-normal-hover: var(--color-surface-subtle-hover);\n --color-comp-btn-normal-pressed: var(--color-surface-subtle-hover);\n --color-comp-btn-normal-on: var(--color-text-primary);\n --color-comp-btn-normal-text: var(--color-text-primary);\n --color-comp-btn-normal-subtle-fill: var(--color-surface-subtle);\n --color-comp-btn-normal-subtle-bg: var(--color-surface-subtle-hover);\n --color-comp-btn-normal-border: var(--color-border-default);\n --color-comp-btn-normal-border-hover: var(\n --color-border-default-hover,\n var(--color-border-default)\n );\n\n --color-comp-btn-danger-base: var(--color-status-danger);\n --color-comp-btn-danger-hover: var(--color-status-danger-hover);\n --color-comp-btn-danger-pressed: var(--color-status-danger-pressed);\n --color-comp-btn-danger-on: var(--color-static-white);\n --color-comp-btn-danger-text: var(\n --color-status-danger-intense,\n var(--color-status-danger)\n );\n --color-comp-btn-danger-subtle-fill: var(--color-status-danger-disabled);\n --color-comp-btn-danger-subtle-bg: var(--color-status-danger-bg);\n\n /* \u2500\u2500 Button: Radius \u2500\u2500 */\n --radius-comp-btn-xl: 0.75rem;\n --radius-comp-btn-lg: 0.5rem;\n --radius-comp-btn-md: 0.5rem;\n --radius-comp-btn-sm: 0.25rem;\n\n /* \u2500\u2500 Button: Spacing \u2500\u2500 */\n --spacing-comp-btn-gap: var(--spacing-gap-sm, 0.5rem);\n --spacing-comp-btn-xl-h: 3rem;\n --spacing-comp-btn-xl-px: var(--spacing-padding-lg, 1.5rem);\n --spacing-comp-btn-lg-h: 2.5rem;\n --spacing-comp-btn-lg-px: var(--spacing-padding-lg, 1.5rem);\n --spacing-comp-btn-md-h: 1.875rem;\n --spacing-comp-btn-md-px: var(--spacing-padding-sm, 0.75rem);\n --spacing-comp-btn-sm-px: var(--spacing-padding-xs, 0.5rem);\n --spacing-comp-btn-sm-py: var(--spacing-padding-2xs, 0.25rem);\n\n /* \u2500\u2500 Button: Font \u2500\u2500 */\n --text-comp-btn-xl: var(--text-text-base, 1rem);\n --text-comp-btn-lg: var(--text-text-base, 1rem);\n --text-comp-btn-md: var(--text-text-sm, 0.875rem);\n --text-comp-btn-sm: var(--text-text-xs, 0.75rem);\n\n /* \u2500\u2500 Button: Misc \u2500\u2500 */\n --shadow-comp-btn: none;\n --opacity-comp-btn-disabled: 0.5;\n\n /* \u2500\u2500 Shared: Shadow \u2500\u2500 */\n --shadow-comp-sm: var(--shadow-elevation-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));\n --shadow-comp-md: var(--shadow-elevation-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));\n --shadow-comp-lg: var(\n --shadow-elevation-lg,\n 0 10px 15px -3px rgb(0 0 0 / 0.1)\n );\n\n /* \u2500\u2500 Shared: Overlay \u2500\u2500 */\n --color-comp-overlay: var(--color-overlay-dim, rgba(0, 0, 0, 0.6));\n\n /* \u2500\u2500 ErrorBoundary \u2500\u2500 */\n --color-comp-error-border: var(--color-status-danger);\n --color-comp-error-bg: var(--color-status-danger-bg, #fef2f2);\n --color-comp-error-text: var(--color-status-danger-intense, #991b1b);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n \uCEF4\uD3EC\uB10C\uD2B8 \uC2A4\uD0C0\uC77C\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n/* \u2500\u2500\u2500 Shared: sr-only \u2500\u2500\u2500 */\n.nexus-sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Button\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--spacing-comp-btn-gap);\n white-space: nowrap;\n user-select: none;\n box-shadow: var(--shadow-comp-btn);\n transition-property: color, background-color, border-color;\n transition-duration: 200ms;\n border: none;\n background: none;\n cursor: pointer;\n font: inherit;\n color: inherit;\n padding: 0;\n margin: 0;\n text-decoration: none;\n}\n.nexus-btn:disabled,\n.nexus-btn[aria-disabled='true'] {\n pointer-events: none;\n opacity: var(--opacity-comp-btn-disabled);\n}\n.nexus-btn:focus-visible {\n outline: 2px solid\n color-mix(in srgb, var(--color-comp-btn-focus-ring) 50%, transparent);\n outline-offset: 2px;\n}\n\n/* Variant: contained */\n.nexus-btn--contained {\n background: var(--_btn-base);\n color: var(--_btn-on);\n}\n.nexus-btn--contained:hover {\n background: var(--_btn-hover);\n}\n.nexus-btn--contained:active {\n background: var(--_btn-pressed);\n}\n\n/* Variant: outlined */\n.nexus-btn--outlined {\n border: 1px solid var(--_btn-border);\n color: var(--_btn-text);\n background: var(--_btn-outlined-bg);\n}\n.nexus-btn--outlined:hover {\n background: var(--_btn-outlined-hover-bg);\n border-color: var(--_btn-border-hover);\n}\n.nexus-btn--outlined:active {\n background: var(--_btn-outlined-pressed-bg);\n border-color: var(--_btn-border-hover);\n}\n\n/* Variant: subtle */\n.nexus-btn--subtle {\n background: var(--_btn-subtle-fill);\n color: var(--_btn-text);\n}\n.nexus-btn--subtle:hover {\n background: var(--_btn-light-bg);\n}\n.nexus-btn--subtle:active {\n background: var(--_btn-light-bg);\n}\n\n/* Variant: ghost */\n.nexus-btn--ghost {\n background: transparent;\n color: var(--_btn-text);\n}\n.nexus-btn--ghost:hover {\n background: var(--_btn-ghost-hover-bg);\n}\n.nexus-btn--ghost:active {\n background: var(--_btn-ghost-pressed-bg);\n}\n\n/* Sizes */\n.nexus-btn--xl {\n height: var(--spacing-comp-btn-xl-h);\n padding-inline: var(--spacing-comp-btn-xl-px);\n font-size: var(--text-comp-btn-xl);\n font-weight: 600;\n border-radius: var(--radius-comp-btn-xl);\n}\n.nexus-btn--lg {\n height: var(--spacing-comp-btn-lg-h);\n padding-inline: var(--spacing-comp-btn-lg-px);\n font-size: var(--text-comp-btn-lg);\n font-weight: 600;\n border-radius: var(--radius-comp-btn-lg);\n}\n.nexus-btn--md {\n height: var(--spacing-comp-btn-md-h);\n padding-inline: var(--spacing-comp-btn-md-px);\n font-size: var(--text-comp-btn-md);\n font-weight: 500;\n border-radius: var(--radius-comp-btn-md);\n}\n.nexus-btn--sm {\n padding-inline: var(--spacing-comp-btn-sm-px);\n padding-block: var(--spacing-comp-btn-sm-py);\n font-size: var(--text-comp-btn-sm);\n font-weight: 500;\n border-radius: var(--radius-comp-btn-sm);\n}\n\n/* Radius override */\n.nexus-btn--circle {\n border-radius: 9999px !important;\n}\n\n/* Semantic palette \u2014 compound selectors (cascade \uBC29\uC9C0) */\n.nexus-btn--primary {\n --_btn-base: var(--color-comp-btn-primary-base);\n --_btn-hover: var(--color-comp-btn-primary-hover);\n --_btn-pressed: var(--color-comp-btn-primary-pressed);\n --_btn-on: var(--color-comp-btn-primary-on);\n --_btn-text: var(--color-comp-btn-primary-text);\n --_btn-subtle-fill: var(--color-comp-btn-primary-subtle-fill);\n --_btn-light-bg: var(--color-comp-btn-primary-subtle-bg);\n --_btn-border: var(--color-accent-primary-focus, var(--color-accent-primary));\n --_btn-border-hover: var(\n --color-accent-primary-focus,\n var(--color-accent-primary)\n );\n --_btn-outlined-bg: var(--color-surface-default);\n --_btn-outlined-hover-bg: var(--color-comp-btn-primary-subtle-bg);\n --_btn-outlined-pressed-bg: var(--color-surface-default);\n --_btn-ghost-hover-bg: var(--color-comp-btn-primary-subtle-bg);\n --_btn-ghost-pressed-bg: var(--color-comp-btn-primary-subtle-fill);\n}\n.nexus-btn--secondary {\n --_btn-base: var(--color-comp-btn-secondary-base);\n --_btn-hover: var(--color-comp-btn-secondary-hover);\n --_btn-pressed: var(--color-comp-btn-secondary-pressed);\n --_btn-on: var(--color-comp-btn-secondary-on);\n --_btn-text: var(--color-comp-btn-secondary-text);\n --_btn-subtle-fill: var(--color-comp-btn-secondary-subtle-fill);\n --_btn-light-bg: var(--color-comp-btn-secondary-subtle-bg);\n --_btn-border: var(\n --color-accent-secondary-focus,\n var(--color-accent-secondary)\n );\n --_btn-border-hover: var(\n --color-accent-secondary-focus,\n var(--color-accent-secondary)\n );\n --_btn-outlined-bg: var(--color-surface-default);\n --_btn-outlined-hover-bg: var(--color-comp-btn-secondary-subtle-bg);\n --_btn-outlined-pressed-bg: var(--color-surface-default);\n --_btn-ghost-hover-bg: var(--color-comp-btn-secondary-subtle-bg);\n --_btn-ghost-pressed-bg: var(--color-comp-btn-secondary-subtle-fill);\n}\n.nexus-btn--normal {\n --_btn-base: var(--color-comp-btn-normal-base);\n --_btn-hover: var(--color-comp-btn-normal-hover);\n --_btn-pressed: var(--color-comp-btn-normal-pressed);\n --_btn-on: var(--color-comp-btn-normal-on);\n --_btn-text: var(--color-comp-btn-normal-text);\n --_btn-subtle-fill: var(--color-comp-btn-normal-subtle-fill);\n --_btn-light-bg: var(--color-comp-btn-normal-subtle-bg);\n --_btn-border: var(--color-comp-btn-normal-border);\n --_btn-border-hover: var(--color-comp-btn-normal-border-hover);\n --_btn-outlined-bg: var(--color-surface-default);\n --_btn-outlined-hover-bg: var(--color-comp-btn-normal-subtle-bg);\n --_btn-outlined-pressed-bg: var(\n --color-surface-pressed,\n var(--color-surface-strong)\n );\n --_btn-ghost-hover-bg: var(--color-comp-btn-normal-subtle-bg);\n --_btn-ghost-pressed-bg: var(\n --color-surface-pressed,\n var(--color-surface-strong)\n );\n}\n.nexus-btn--danger {\n --_btn-base: var(--color-comp-btn-danger-base);\n --_btn-hover: var(--color-comp-btn-danger-hover);\n --_btn-pressed: var(--color-comp-btn-danger-pressed);\n --_btn-on: var(--color-comp-btn-danger-on);\n --_btn-text: var(--color-comp-btn-danger-text);\n --_btn-subtle-fill: var(--color-comp-btn-danger-subtle-fill);\n --_btn-light-bg: var(--color-comp-btn-danger-subtle-bg);\n --_btn-border: var(--color-status-danger-focus, var(--color-status-danger));\n --_btn-border-hover: var(\n --color-status-danger-focus,\n var(--color-status-danger)\n );\n --_btn-outlined-bg: var(--color-surface-default);\n --_btn-outlined-hover-bg: var(--color-comp-btn-danger-subtle-bg);\n --_btn-outlined-pressed-bg: var(--color-surface-default);\n --_btn-ghost-hover-bg: var(--color-comp-btn-danger-subtle-bg);\n --_btn-ghost-pressed-bg: var(--color-comp-btn-danger-subtle-fill);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n TextInput\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n/* \u2500\u2500 Field wrapper \u2500\u2500 */\n.nexus-text-input-field {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n.nexus-text-input-field__label {\n font-size: var(--text-text-sm, 0.875rem);\n font-weight: 600;\n color: var(--color-text-muted);\n line-height: 1;\n}\n.nexus-text-input-field__footer {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.nexus-text-input-field__description {\n font-size: var(--text-text-xs, 0.75rem);\n color: var(--color-text-muted);\n line-height: 1.5;\n letter-spacing: -0.12px;\n}\n.nexus-text-input-field__description--error {\n color: var(--color-status-danger);\n}\n.nexus-text-input-field__count {\n font-size: var(--text-text-xs, 0.75rem);\n color: var(--color-text-muted);\n margin-left: auto;\n flex-shrink: 0;\n}\n.nexus-text-input-field__count--error {\n color: var(--color-status-danger);\n}\n\n/* \u2500\u2500 Input box \u2500\u2500 */\n.nexus-text-input {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n border-radius: var(--radius-corner-md, 0.5rem);\n border: 1px solid var(--color-border-default);\n background: var(--color-surface-default);\n font-size: var(--text-text-sm, 0.875rem);\n font-weight: 500;\n line-height: 1;\n color: var(--color-text-primary);\n transition:\n border-color 200ms,\n box-shadow 200ms;\n}\n:where(.nexus-text-input) {\n width: 100%;\n}\n.nexus-text-input:hover:not(.nexus-text-input--disabled):not(:focus-within) {\n border-color: var(--color-border-default-hover);\n box-shadow: 0 0 0 0.5px var(--color-border-default-hover);\n}\n.nexus-text-input--default:focus-within {\n border-color: var(--color-accent-primary);\n box-shadow: 0 0 0 0.5px var(--color-accent-primary);\n}\n.nexus-text-input--error {\n border-color: var(--color-status-danger);\n}\n.nexus-text-input--error:focus-within {\n border-color: var(--color-status-danger);\n box-shadow: 0 0 0 0.5px var(--color-status-danger);\n}\n.nexus-text-input--disabled {\n cursor: not-allowed;\n background: var(--color-surface-strong);\n border-color: var(--color-border-medium);\n color: var(--color-text-muted);\n}\n\n/* \u2500\u2500 Sizes \u2500\u2500 */\n.nexus-text-input--xl {\n padding: calc(var(--spacing-padding-md, 1rem) - 1px)\n var(--spacing-padding-md, 1rem);\n font-size: var(--text-text-base, 1rem);\n}\n.nexus-text-input--lg {\n padding: calc(var(--spacing-padding-sm, 0.75rem) - 1px)\n var(--spacing-padding-sm, 0.75rem);\n font-size: var(--text-text-base, 1rem);\n}\n.nexus-text-input--md {\n padding: calc(var(--spacing-padding-xs, 0.5rem) - 1px)\n var(--spacing-padding-sm, 0.75rem);\n font-size: var(--text-text-sm, 0.875rem);\n}\n\n/* \u2500\u2500 Inner elements \u2500\u2500 */\n.nexus-text-input__inner {\n flex: 1;\n min-width: 0;\n padding: 0;\n background: transparent;\n border: none;\n outline: none;\n color: inherit;\n font: inherit;\n}\n.nexus-text-input__inner:focus-visible {\n outline: none;\n}\n.nexus-text-input__inner::placeholder {\n color: var(--color-text-muted);\n}\n.nexus-text-input__icon {\n display: flex;\n flex-shrink: 0;\n color: var(--color-text-muted);\n}\n.nexus-text-input__clear {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 1rem;\n height: 1rem;\n border: none;\n background: transparent;\n color: var(--color-text-muted);\n cursor: pointer;\n padding: 0;\n transition: color 150ms;\n}\n.nexus-text-input__clear:hover {\n color: var(--color-icon-tertiary-hover);\n background: transparent;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n PriceInput\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n/* \u2500\u2500 Field wrapper \u2500\u2500 */\n.nexus-price-input-field {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n.nexus-price-input-field__header {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: 0.5rem;\n}\n.nexus-price-input-field__label {\n font-size: var(--text-text-sm, 0.875rem);\n font-weight: 600;\n color: var(--color-text-tertiary);\n line-height: 1;\n}\n.nexus-price-input-field__balance {\n display: inline-flex;\n align-items: baseline;\n gap: 0.375rem;\n margin-left: auto;\n padding: 0;\n border: none;\n background: transparent;\n font-size: var(--text-text-xs, 0.75rem);\n font-weight: 400;\n color: var(--color-text-tertiary);\n cursor: pointer;\n line-height: 1.5;\n letter-spacing: -0.12px;\n transition: color 150ms;\n}\n.nexus-price-input-field__balance:hover {\n color: var(--color-text-tertiary);\n}\n.nexus-price-input-field__balance:disabled {\n cursor: not-allowed;\n opacity: var(--opacity-disabled-text, 0.5);\n}\n.nexus-price-input-field__balance-value {\n font-weight: 400;\n color: var(--color-text-secondary);\n text-decoration: underline;\n transition: color 150ms;\n}\n.nexus-price-input-field__balance:hover\n .nexus-price-input-field__balance-value {\n color: var(--color-text-primary);\n}\n.nexus-price-input-field__balance-value--exceeded {\n color: var(--color-status-danger);\n}\n.nexus-price-input-field__balance:hover\n .nexus-price-input-field__balance-value--exceeded {\n color: var(--color-status-danger);\n}\n.nexus-price-input-field__description {\n font-size: var(--text-text-xs, 0.75rem);\n color: var(--color-text-tertiary);\n line-height: 1.5;\n letter-spacing: -0.12px;\n}\n.nexus-price-input-field__description--error {\n color: var(--color-status-danger);\n}\n\n/* \u2500\u2500 Input box \u2500\u2500 */\n.nexus-price-input {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n border-radius: var(--radius-corner-md, 0.5rem);\n border: 1px solid var(--color-border-default);\n background: var(--color-surface-default);\n font-size: var(--text-text-sm, 0.875rem);\n font-weight: 500;\n line-height: 1;\n color: var(--color-text-primary);\n transition:\n border-color 200ms,\n box-shadow 200ms;\n}\n:where(.nexus-price-input) {\n width: 100%;\n}\n.nexus-price-input:hover:not(.nexus-price-input--disabled):not(:focus-within) {\n border-color: var(--color-border-default-hover);\n box-shadow: 0 0 0 0.5px var(--color-border-default-hover);\n}\n.nexus-price-input--default:focus-within {\n border-color: var(--color-accent-primary);\n box-shadow: 0 0 0 0.5px var(--color-accent-primary);\n}\n.nexus-price-input--error {\n border-color: var(--color-status-danger);\n}\n.nexus-price-input--error:focus-within {\n border-color: var(--color-status-danger);\n box-shadow: 0 0 0 0.5px var(--color-status-danger);\n}\n.nexus-price-input--disabled {\n cursor: not-allowed;\n background: var(--color-surface-strong);\n border-color: var(--color-border-medium);\n color: var(--color-text-muted);\n}\n\n/* \u2500\u2500 Sizes \u2500\u2500 */\n.nexus-price-input--xl {\n padding: calc(var(--spacing-padding-md, 1rem) - 1px)\n var(--spacing-padding-md, 1rem);\n font-size: var(--text-text-base, 1rem);\n}\n.nexus-price-input--lg {\n padding: calc(var(--spacing-padding-sm, 0.75rem) - 1px)\n var(--spacing-padding-sm, 0.75rem);\n font-size: var(--text-text-base, 1rem);\n}\n.nexus-price-input--md {\n padding: calc(var(--spacing-padding-xs, 0.5rem) - 1px)\n var(--spacing-padding-sm, 0.75rem);\n font-size: var(--text-text-sm, 0.875rem);\n}\n\n/* \u2500\u2500 Inner elements \u2500\u2500 */\n.nexus-price-input__prefix {\n flex-shrink: 0;\n color: var(--color-text-secondary);\n font: inherit;\n user-select: none;\n}\n.nexus-price-input__suffix {\n flex-shrink: 0;\n color: var(--color-text-secondary);\n font: inherit;\n white-space: nowrap;\n user-select: none;\n}\n.nexus-price-input__inner {\n flex: 1;\n min-width: 0;\n padding: 0;\n background: transparent;\n border: none;\n outline: none;\n color: inherit;\n font: inherit;\n}\n.nexus-price-input__inner:focus-visible {\n outline: none;\n}\n.nexus-price-input__inner::placeholder {\n color: var(--color-text-muted);\n}\n.nexus-price-input__inner--right {\n text-align: right;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n TextArea\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n/* \u2500\u2500 Field wrapper \u2500\u2500 */\n.nexus-textarea-field {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n.nexus-textarea-field__label {\n font-size: var(--text-label-semibold-md, 0.875rem);\n font-weight: 600;\n color: var(--color-text-tertiary);\n line-height: 1;\n}\n.nexus-textarea-field__footer {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.nexus-textarea-field__description {\n flex: 1;\n min-width: 0;\n font-size: var(--text-text-xs, 0.75rem);\n color: var(--color-text-tertiary);\n line-height: 1.5;\n letter-spacing: -0.12px;\n}\n.nexus-textarea-field__description--error {\n color: var(--color-status-danger-intense, #d20625);\n}\n.nexus-textarea-field__count {\n font-size: var(--text-text-xs, 0.75rem);\n color: var(--color-text-tertiary);\n line-height: 1.5;\n letter-spacing: -0.12px;\n text-align: right;\n flex-shrink: 0;\n margin-left: auto;\n}\n.nexus-textarea-field__count--error {\n color: var(--color-status-danger-intense, #d20625);\n}\n\n/* \u2500\u2500 Textarea box \u2500\u2500 */\n.nexus-textarea {\n border-radius: var(--radius-corner-md, 0.5rem);\n border: 1px solid var(--color-border-default);\n background: var(--color-surface-default);\n color: var(--color-text-primary);\n font-weight: 500;\n line-height: 1.5;\n transition:\n border-color 200ms,\n box-shadow 200ms;\n resize: none;\n min-height: 100px;\n padding: var(--spacing-padding-sm, 0.75rem);\n}\n:where(.nexus-textarea) {\n width: 100%;\n}\n.nexus-textarea::placeholder {\n color: var(--color-text-muted);\n}\n.nexus-textarea:focus-visible {\n outline: none;\n}\n\n/* Hover */\n.nexus-textarea:hover:not(.nexus-textarea--disabled):not(:focus) {\n border-color: var(--color-border-default-hover);\n box-shadow: 0 0 0 0.5px var(--color-border-default-hover);\n}\n\n/* Focus \u2014 default */\n.nexus-textarea--default:focus {\n border-color: var(--color-accent-primary);\n box-shadow: 0 0 0 0.5px var(--color-accent-primary);\n}\n\n/* Error */\n.nexus-textarea--error {\n border-color: var(--color-status-danger-focus, #e62848);\n box-shadow: 0 0 0 0.5px var(--color-status-danger-focus, #e62848);\n}\n.nexus-textarea--error:focus {\n border-color: var(--color-status-danger-focus, #e62848);\n box-shadow: 0 0 0 0.5px var(--color-status-danger-focus, #e62848);\n}\n\n/* Disabled */\n.nexus-textarea--disabled {\n cursor: not-allowed;\n background: var(\n --color-surface-default-disabled,\n var(--color-surface-strong)\n );\n border-color: var(--color-border-medium);\n color: var(--color-text-muted);\n}\n\n/* \u2500\u2500 Sizes \u2500\u2500 */\n.nexus-textarea--lg {\n font-size: var(--text-text-medium-base, 1rem);\n letter-spacing: -0.16px;\n}\n.nexus-textarea--md {\n font-size: var(--text-text-medium-sm, 0.875rem);\n letter-spacing: -0.14px;\n}\n\n/* \u2500\u2500 Resize modes \u2500\u2500 */\n.nexus-textarea--resize-default {\n resize: vertical;\n}\n.nexus-textarea--resize-auto {\n resize: none;\n overflow: hidden;\n}\n\n/* \u2500\u2500 Custom scrollbar \u2500\u2500 */\n.nexus-textarea:not(.nexus-textarea--resize-auto) {\n overflow-y: auto;\n}\n.nexus-textarea::-webkit-scrollbar {\n width: 5px;\n}\n.nexus-textarea::-webkit-scrollbar-track {\n background: transparent;\n}\n.nexus-textarea::-webkit-scrollbar-thumb {\n background: var(--color-icon-muted, #c6d0da);\n border-radius: var(--radius-corner-full, 9999px);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n NumberInput\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-number-input {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n}\n:where(.nexus-number-input) {\n width: 100%;\n}\n\n/* \u2500\u2500 Header (label + max) \u2500\u2500 */\n.nexus-number-input__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 4px;\n}\n.nexus-number-input__label {\n font-size: var(--text-label-semibold-md, 0.875rem);\n font-weight: var(--font-weight-label-semibold-md, 600);\n line-height: 1;\n color: var(--color-text-tertiary);\n}\n.nexus-number-input__max {\n display: flex;\n align-items: center;\n gap: 4px;\n margin: 0;\n margin-left: auto;\n padding: 0;\n border: none;\n background: none;\n font-size: var(--text-text-xs, 0.75rem);\n font-weight: 400;\n line-height: 1.5;\n letter-spacing: -0.01em;\n cursor: pointer;\n}\n.nexus-number-input__max:disabled {\n cursor: default;\n}\n.nexus-number-input__max-text {\n color: var(--color-text-tertiary);\n}\n.nexus-number-input__max-value {\n color: var(--color-text-secondary);\n text-decoration: underline;\n}\n.nexus-number-input__max-value--exceeded {\n color: var(--color-status-danger-intense);\n}\n\n/* \u2500\u2500 Container (the bordered input box) \u2500\u2500 */\n.nexus-number-input__container {\n display: flex;\n align-items: center;\n border-radius: var(--radius-corner-md, 0.5rem);\n border: 1px solid var(--color-border-default);\n background: var(--color-surface-default);\n outline: 0.5px solid transparent;\n transition:\n border-color var(--duration-transition-fast, 150ms),\n outline-color var(--duration-transition-fast, 150ms);\n}\n.nexus-number-input--basic .nexus-number-input__container {\n overflow: clip;\n}\n.nexus-number-input:not(.nexus-number-input--disabled):not(\n .nexus-number-input--error\n )\n .nexus-number-input__container:hover {\n border-color: var(--color-border-default-hover);\n outline-color: var(--color-border-default-hover);\n}\n.nexus-number-input:not(.nexus-number-input--disabled):not(\n .nexus-number-input--error\n )\n .nexus-number-input__container:focus-within {\n border-color: var(--color-accent-primary-focus);\n outline-color: var(--color-accent-primary-focus);\n}\n.nexus-number-input--error .nexus-number-input__container {\n border-color: var(--color-status-danger-focus);\n outline-color: var(--color-status-danger-focus);\n}\n.nexus-number-input--disabled .nexus-number-input__container {\n background: var(--color-surface-strong);\n border-color: var(--color-border-medium);\n pointer-events: none;\n}\n.nexus-number-input--disabled .nexus-number-input__label {\n color: var(--color-text-muted);\n}\n.nexus-number-input--disabled .nexus-number-input__max {\n cursor: default;\n}\n.nexus-number-input--disabled .nexus-number-input__max-text,\n.nexus-number-input--disabled .nexus-number-input__max-value {\n color: var(--color-text-muted);\n text-decoration: none;\n}\n.nexus-number-input--disabled .nexus-number-input__step {\n color: var(--color-text-muted);\n}\n.nexus-number-input--disabled .nexus-number-input__bind-btn {\n background: var(--color-surface-strong);\n color: var(--color-text-muted);\n}\n.nexus-number-input--disabled .nexus-number-input__description {\n color: var(--color-text-muted);\n}\n\n/* \u2500\u2500 Input field \u2500\u2500 */\n.nexus-number-input__field {\n flex: 1;\n min-width: 0;\n border: none;\n background: transparent;\n outline: none;\n font-size: var(--text-label-lg, 1rem);\n font-weight: var(--font-weight-label-lg, 500);\n line-height: 1;\n color: var(--color-text-primary);\n}\n.nexus-number-input__field::placeholder {\n color: var(--color-text-muted);\n}\n.nexus-number-input__field:focus-visible {\n outline: none;\n}\n.nexus-number-input--disabled .nexus-number-input__field {\n color: var(--color-text-muted);\n cursor: not-allowed;\n}\n\n/* \u2500\u2500 Size: field padding (basic) \u2500\u2500 */\n.nexus-number-input--basic.nexus-number-input--lg .nexus-number-input__field {\n padding: var(--spacing-padding-sm, 0.75rem);\n}\n.nexus-number-input--basic.nexus-number-input--xl .nexus-number-input__field {\n padding: var(--spacing-padding-md, 1rem);\n}\n\n/* \u2500\u2500 Size: field padding (bind) \u2500\u2500 */\n.nexus-number-input--bind .nexus-number-input__container {\n padding-inline: var(--spacing-padding-xs, 0.5rem);\n}\n.nexus-number-input--bind .nexus-number-input__field {\n text-align: center;\n}\n.nexus-number-input--bind.nexus-number-input--lg .nexus-number-input__field {\n padding: var(--spacing-padding-sm, 0.75rem);\n}\n.nexus-number-input--bind.nexus-number-input--xl .nexus-number-input__field {\n padding: var(--spacing-padding-md, 1rem) var(--spacing-padding-sm, 0.75rem);\n}\n\n/* \u2500\u2500 Basic variant: chevron buttons column \u2500\u2500 */\n.nexus-number-input__buttons {\n display: flex;\n flex-direction: column;\n align-self: stretch;\n border-left: 1px solid var(--color-border-default);\n width: 24px;\n flex-shrink: 0;\n}\n.nexus-number-input__step {\n display: flex;\n flex: 1;\n align-items: center;\n justify-content: center;\n padding: 0;\n margin: 0;\n border: none;\n background: var(--color-surface-subtle);\n cursor: pointer;\n color: var(--color-icon-secondary);\n transition:\n color var(--duration-transition-fast, 150ms),\n background-color var(--duration-transition-fast, 150ms);\n}\n.nexus-number-input__step:hover {\n background: var(--color-surface-subtle-hover);\n color: var(--color-icon-primary);\n}\n.nexus-number-input__step:disabled {\n color: var(--color-text-muted);\n pointer-events: none;\n}\n.nexus-number-input__step--up {\n border-bottom: 1px solid var(--color-border-default);\n}\n.nexus-number-input__chevron-icon {\n width: 8px;\n height: 5px;\n}\n.nexus-number-input__chevron-icon--down {\n transform: scaleY(-1);\n}\n\n/* \u2500\u2500 Bind variant: +/- buttons \u2500\u2500 */\n.nexus-number-input__bind-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n padding: 0;\n margin: 0;\n border: none;\n border-radius: var(--radius-corner-sm, 0.25rem);\n background: var(--color-surface-subtle);\n color: var(--color-icon-secondary);\n cursor: pointer;\n overflow: clip;\n transition:\n color var(--duration-transition-fast, 150ms),\n background-color var(--duration-transition-fast, 150ms);\n}\n.nexus-number-input__bind-btn:hover {\n background: var(--color-surface-subtle-hover);\n color: var(--color-icon-primary);\n}\n.nexus-number-input__bind-btn:disabled {\n color: var(--color-text-muted);\n pointer-events: none;\n}\n.nexus-number-input--xl .nexus-number-input__bind-btn {\n width: 30px;\n height: 30px;\n}\n.nexus-number-input__bind-icon {\n width: 16px;\n height: 16px;\n}\n\n/* \u2500\u2500 Description \u2500\u2500 */\n.nexus-number-input__description {\n margin: 0;\n font-size: var(--text-text-xs, 0.75rem);\n font-weight: 400;\n line-height: 1.5;\n letter-spacing: -0.01em;\n color: var(--color-text-tertiary);\n height: 18px;\n}\n.nexus-number-input__description--error {\n color: var(--color-status-danger-intense);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Divider\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-divider {\n flex-shrink: 0;\n border-color: var(--color-border-default);\n}\n.nexus-divider--horizontal {\n width: 100%;\n border-top-width: 1px;\n}\n.nexus-divider--vertical {\n align-self: stretch;\n border-left-width: 1px;\n}\n.nexus-divider--solid {\n border-style: solid;\n}\n.nexus-divider--dashed {\n border-style: dashed;\n}\n.nexus-divider--dotted {\n border-style: dotted;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Avatar\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-avatar {\n position: relative;\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n background: var(--color-surface-hover);\n color: var(--color-text-tertiary);\n}\n.nexus-avatar--xs {\n width: 1.5rem;\n height: 1.5rem;\n font-size: 10px;\n}\n.nexus-avatar--sm {\n width: 2rem;\n height: 2rem;\n font-size: var(--text-text-xs, 0.75rem);\n}\n.nexus-avatar--md {\n width: 2.5rem;\n height: 2.5rem;\n font-size: var(--text-text-sm, 0.875rem);\n}\n.nexus-avatar--lg {\n width: 3rem;\n height: 3rem;\n font-size: var(--text-text-base, 1rem);\n}\n.nexus-avatar--xl {\n width: 4rem;\n height: 4rem;\n font-size: var(--text-text-lg, 1.125rem);\n}\n.nexus-avatar--circle {\n border-radius: 9999px;\n}\n.nexus-avatar--square {\n border-radius: var(--radius-corner-md, 0.375rem);\n}\n.nexus-avatar__icon--xs {\n width: 1rem;\n height: 1rem;\n}\n.nexus-avatar__icon--sm {\n width: 1.25rem;\n height: 1.25rem;\n}\n.nexus-avatar__icon--md {\n width: 1.5rem;\n height: 1.5rem;\n}\n.nexus-avatar__icon--lg {\n width: 2rem;\n height: 2rem;\n}\n.nexus-avatar__icon--xl {\n width: 2.5rem;\n height: 2.5rem;\n}\n.nexus-avatar__img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Switch\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-switch {\n position: relative;\n display: inline-flex;\n flex-shrink: 0;\n cursor: pointer;\n border-radius: 9999px;\n transition-property: background-color;\n transition-duration: 200ms;\n border: 2px solid transparent;\n}\n.nexus-switch:has(input:disabled) {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.nexus-switch--sm {\n height: 1.25rem;\n width: 2.25rem;\n}\n.nexus-switch--md {\n height: 1.5rem;\n width: 2.75rem;\n}\n.nexus-switch--checked {\n background: var(--color-accent-primary);\n}\n.nexus-switch--unchecked {\n background: var(--color-border-default);\n}\n.nexus-switch__thumb {\n pointer-events: none;\n display: block;\n border-radius: 9999px;\n background: var(--color-static-white);\n box-shadow: var(--shadow-comp-sm);\n transition-property: transform;\n transition-duration: 200ms;\n}\n.nexus-switch__thumb--sm {\n width: 1rem;\n height: 1rem;\n}\n.nexus-switch__thumb--md {\n width: 1.25rem;\n height: 1.25rem;\n}\n.nexus-switch__thumb--sm-on {\n transform: translateX(1rem);\n}\n.nexus-switch__thumb--md-on {\n transform: translateX(1.25rem);\n}\n.nexus-switch__thumb--off {\n transform: translateX(0);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CheckBox\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-checkbox {\n display: inline-flex;\n align-items: center;\n gap: var(--spacing-gap-sm, 0.5rem);\n user-select: none;\n}\n.nexus-checkbox--sm {\n font-size: var(--text-text-xs, 0.75rem);\n}\n.nexus-checkbox--md {\n font-size: var(--text-text-sm, 0.875rem);\n}\n.nexus-checkbox--pointer {\n cursor: pointer;\n}\n.nexus-checkbox--disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.nexus-checkbox__box {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--color-border-default);\n transition-property: border-color, background-color;\n transition-duration: 150ms;\n}\n.nexus-checkbox__box:has(~ .nexus-sr-only:disabled) {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.nexus-checkbox__box--sm {\n width: 1rem;\n height: 1rem;\n}\n.nexus-checkbox__box--md {\n width: 1.25rem;\n height: 1.25rem;\n}\n.nexus-checkbox__box--square {\n border-radius: var(--radius-corner-sm, 0.25rem);\n}\n.nexus-checkbox__box--round {\n border-radius: 9999px;\n}\n.nexus-checkbox__box--checked {\n border-color: var(--color-accent-primary);\n background: var(--color-accent-primary);\n color: var(--color-static-white);\n}\n.nexus-checkbox__box--unchecked {\n border-color: var(--color-border-default);\n background: var(--color-surface-default);\n}\n.nexus-checkbox__icon--sm {\n width: 0.75rem;\n height: 0.75rem;\n}\n.nexus-checkbox__icon--md {\n width: 0.875rem;\n height: 0.875rem;\n}\n.nexus-checkbox__label {\n color: var(--color-text-primary);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n RadioGroup\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-radio-group {\n display: flex;\n}\n.nexus-radio-group--horizontal {\n flex-direction: row;\n gap: var(--spacing-gap-lg, 1rem);\n}\n.nexus-radio-group--vertical {\n flex-direction: column;\n gap: var(--spacing-gap-sm, 0.5rem);\n}\n.nexus-radio-item {\n display: inline-flex;\n align-items: center;\n gap: var(--spacing-gap-sm, 0.5rem);\n user-select: none;\n}\n.nexus-radio-item--sm {\n font-size: var(--text-text-xs, 0.75rem);\n}\n.nexus-radio-item--md {\n font-size: var(--text-text-sm, 0.875rem);\n}\n.nexus-radio-item--pointer {\n cursor: pointer;\n}\n.nexus-radio-item--disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.nexus-radio__circle {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border-radius: 9999px;\n border: 1px solid var(--color-border-default);\n transition-property: border-color;\n transition-duration: 150ms;\n}\n.nexus-radio__circle:has(~ .nexus-sr-only:disabled) {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.nexus-radio__circle--sm {\n width: 1rem;\n height: 1rem;\n}\n.nexus-radio__circle--md {\n width: 1.25rem;\n height: 1.25rem;\n}\n.nexus-radio__circle--checked {\n border-color: var(--color-accent-primary);\n color: var(--color-accent-primary);\n}\n.nexus-radio__circle--unchecked {\n border-color: var(--color-border-default);\n background: var(--color-surface-default);\n}\n.nexus-radio__dot {\n border-radius: 9999px;\n background: currentColor;\n}\n.nexus-radio__dot--sm {\n width: 0.375rem;\n height: 0.375rem;\n}\n.nexus-radio__dot--md {\n width: 0.5rem;\n height: 0.5rem;\n}\n.nexus-radio__label {\n color: var(--color-text-primary);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Chip\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-chip {\n display: inline-flex;\n align-items: center;\n gap: 0.375rem;\n white-space: nowrap;\n font-weight: 500;\n transition-property: color, background-color, border-color;\n transition-duration: 150ms;\n user-select: none;\n border-radius: 9999px;\n border: 1px solid transparent;\n background: transparent;\n cursor: pointer;\n font-family: inherit;\n padding: 0;\n margin: 0;\n text-decoration: none;\n}\n.nexus-chip[aria-disabled='true'] {\n opacity: 0.5;\n pointer-events: none;\n}\n.nexus-chip--default {\n border-color: var(--color-border-default);\n background: var(--color-surface-default);\n color: var(--color-text-primary);\n}\n.nexus-chip--filled {\n border-color: transparent;\n background: var(--color-surface-hover);\n color: var(--color-text-primary);\n}\n.nexus-chip--outline {\n border-color: var(--color-border-default);\n background: transparent;\n color: var(--color-text-primary);\n}\n.nexus-chip--accent {\n border-color: transparent;\n background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent);\n color: var(--color-accent-primary);\n}\n.nexus-chip--sm {\n height: 1.5rem;\n padding-inline: var(--spacing-padding-xs, 0.5rem);\n font-size: var(--text-text-xs, 0.75rem);\n}\n.nexus-chip--md {\n height: 1.75rem;\n padding-inline: 0.625rem;\n font-size: var(--text-text-xs, 0.75rem);\n}\n.nexus-chip--lg {\n height: 2rem;\n padding-inline: var(--spacing-padding-sm, 0.75rem);\n font-size: var(--text-text-sm, 0.875rem);\n}\n.nexus-chip__close {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border-radius: 9999px;\n padding: 0.125rem;\n opacity: 0.6;\n transition-property: opacity;\n transition-duration: 150ms;\n}\n.nexus-chip__close:hover {\n opacity: 1;\n}\n.nexus-chip__close-icon {\n width: 0.75rem;\n height: 0.75rem;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Badge\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-badge-wrapper {\n position: relative;\n}\n.nexus-badge {\n --nexus-badge-offset-x: 0px;\n --nexus-badge-offset-y: 0px;\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 1.25rem;\n height: 1.25rem;\n padding: 0 0.35rem;\n border-radius: var(--radius-corner-full, 9999px);\n font-size: var(--text-text-xs, 0.75rem);\n font-weight: var(--font-weight-label-semibold-sm, 600);\n line-height: 1;\n color: var(--color-text-inverted);\n}\n.nexus-badge--positioned {\n position: absolute;\n top: 0;\n right: 0;\n z-index: 1;\n transform: translate(\n calc(50% + var(--nexus-badge-offset-x)),\n calc(-50% + var(--nexus-badge-offset-y))\n );\n}\n.nexus-badge--dot {\n min-width: 0;\n padding: 0;\n}\n.nexus-badge--dot.nexus-badge--sm {\n width: 0.375rem;\n height: 0.375rem;\n}\n.nexus-badge--dot.nexus-badge--md {\n width: 0.5rem;\n height: 0.5rem;\n}\n.nexus-badge--dot.nexus-badge--lg {\n width: 0.625rem;\n height: 0.625rem;\n}\n.nexus-badge--danger {\n background: var(--color-status-danger);\n color: var(--color-static-white);\n}\n.nexus-badge--primary {\n background: var(--color-accent-primary);\n color: var(--color-accent-on-primary);\n}\n.nexus-badge--secondary {\n background: var(--color-accent-secondary);\n color: var(--color-accent-on-secondary);\n}\n.nexus-badge--info {\n background: var(--color-status-info);\n color: var(--color-static-white);\n}\n.nexus-badge--success {\n background: var(--color-status-success);\n color: var(--color-static-white);\n}\n.nexus-badge--warning {\n background: var(--color-status-warning);\n color: var(--color-static-black);\n}\n.nexus-badge--sm:not(.nexus-badge--dot) {\n min-width: 1rem;\n height: 1rem;\n padding: 0 0.25rem;\n font-size: 0.625rem;\n}\n.nexus-badge--lg:not(.nexus-badge--dot) {\n min-width: 1.5rem;\n height: 1.5rem;\n padding: 0 0.45rem;\n font-size: var(--text-text-sm, 0.875rem);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Progress\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-progress-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-gap-xs, 0.25rem);\n width: 100%;\n}\n.nexus-progress__header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--spacing-gap-sm, 0.5rem);\n}\n.nexus-progress__label {\n font-size: var(--text-text-sm, 0.875rem);\n color: var(--color-text-primary);\n}\n.nexus-progress__value {\n font-size: var(--text-text-sm, 0.875rem);\n color: var(--color-text-secondary);\n font-variant-numeric: tabular-nums;\n}\n.nexus-progress {\n position: relative;\n width: 100%;\n overflow: hidden;\n border-radius: var(--radius-corner-full, 9999px);\n background: var(--color-surface-strong);\n}\n.nexus-progress--sm {\n height: 0.25rem;\n}\n.nexus-progress--md {\n height: 0.375rem;\n}\n.nexus-progress--lg {\n height: 0.5rem;\n}\n.nexus-progress__bar {\n height: 100%;\n border-radius: inherit;\n transition: width var(--duration-transition-normal, 200ms)\n var(--ease-transition-normal, cubic-bezier(0, 0, 0.2, 1));\n}\n.nexus-progress--primary .nexus-progress__bar {\n background: var(--color-accent-primary);\n}\n.nexus-progress--success .nexus-progress__bar {\n background: var(--color-status-success);\n}\n.nexus-progress--warning .nexus-progress__bar {\n background: var(--color-status-warning);\n}\n.nexus-progress--danger .nexus-progress__bar {\n background: var(--color-status-danger);\n}\n.nexus-progress--info .nexus-progress__bar {\n background: var(--color-status-info);\n}\n.nexus-progress__bar--indeterminate {\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 35% !important;\n animation: nexus-progress-indeterminate 1.1s\n var(--ease-transition-normal, cubic-bezier(0, 0, 0.2, 1)) infinite;\n}\n@keyframes nexus-progress-indeterminate {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(calc(100% / 0.35 * 3));\n }\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Alert\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-alert {\n display: flex;\n align-items: flex-start;\n gap: var(--spacing-gap-sm, 0.5rem);\n padding: var(--spacing-padding-md, 1rem);\n border-radius: var(--radius-corner-md, 8px);\n border-width: var(--border-width-stroke-thin, 1px);\n border-style: solid;\n}\n.nexus-alert__icon {\n flex-shrink: 0;\n margin-top: 0.125rem;\n line-height: 0;\n}\n.nexus-alert__icon-svg {\n width: 1.25rem;\n height: 1.25rem;\n}\n.nexus-alert__body {\n flex: 1;\n min-width: 0;\n}\n.nexus-alert__title {\n margin: 0;\n font-weight: var(--font-weight-heading-h7, 600);\n font-size: var(--text-text-sm, 0.875rem);\n color: var(--color-text-primary);\n}\n.nexus-alert__description {\n margin-top: var(--spacing-gap-xs, 0.25rem);\n font-size: var(--text-text-sm, 0.875rem);\n color: var(--color-text-secondary);\n}\n.nexus-alert__action {\n flex-shrink: 0;\n align-self: center;\n}\n.nexus-alert__close {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin: 0;\n padding: var(--spacing-padding-2xs, 0.25rem);\n border: none;\n border-radius: var(--radius-corner-sm, 4px);\n background: transparent;\n cursor: pointer;\n font: inherit;\n color: var(--color-icon-secondary);\n transition: color var(--duration-transition-fast, 150ms)\n var(--ease-transition-fast, ease);\n}\n.nexus-alert__close:hover {\n color: var(--color-icon-primary);\n}\n.nexus-alert__close-icon {\n width: 1rem;\n height: 1rem;\n}\n.nexus-alert--info {\n background: color-mix(\n in srgb,\n var(--color-status-info-dim) 45%,\n var(--color-surface-default)\n );\n border-color: color-mix(\n in srgb,\n var(--color-status-info) 28%,\n var(--color-border-default)\n );\n}\n.nexus-alert--info .nexus-alert__icon {\n color: var(--color-status-info-intense);\n}\n.nexus-alert--success {\n background: color-mix(\n in srgb,\n var(--color-status-success-dim) 45%,\n var(--color-surface-default)\n );\n border-color: color-mix(\n in srgb,\n var(--color-status-success) 28%,\n var(--color-border-default)\n );\n}\n.nexus-alert--success .nexus-alert__icon {\n color: var(--color-status-success-intense);\n}\n.nexus-alert--warning {\n background: color-mix(\n in srgb,\n var(--color-status-warning-dim) 45%,\n var(--color-surface-default)\n );\n border-color: color-mix(\n in srgb,\n var(--color-status-warning) 28%,\n var(--color-border-default)\n );\n}\n.nexus-alert--warning .nexus-alert__icon {\n color: var(--color-status-warning-intense);\n}\n.nexus-alert--danger {\n background: color-mix(\n in srgb,\n var(--color-status-danger-dim) 45%,\n var(--color-surface-default)\n );\n border-color: color-mix(\n in srgb,\n var(--color-status-danger) 28%,\n var(--color-border-default)\n );\n}\n.nexus-alert--danger .nexus-alert__icon {\n color: var(--color-status-danger-intense);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Pagination\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-pagination {\n display: flex;\n align-items: center;\n gap: var(--spacing-gap-xs, 0.25rem);\n}\n.nexus-pagination--sm {\n font-size: var(--text-text-xs, 0.75rem);\n}\n.nexus-pagination--md {\n font-size: var(--text-text-sm, 0.875rem);\n}\n.nexus-page-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--radius-corner-md, 0.375rem);\n font-weight: 500;\n transition-property: color, background-color;\n transition-duration: 150ms;\n user-select: none;\n border: 1px solid transparent;\n background: transparent;\n cursor: pointer;\n font-family: inherit;\n padding: 0;\n margin: 0;\n}\n.nexus-page-btn:disabled {\n opacity: 0.4;\n pointer-events: none;\n}\n.nexus-page-btn--sm {\n width: 1.75rem;\n height: 1.75rem;\n font-size: var(--text-text-xs, 0.75rem);\n}\n.nexus-page-btn--md {\n width: 2.25rem;\n height: 2.25rem;\n font-size: var(--text-text-sm, 0.875rem);\n}\n.nexus-page-btn--active {\n background: var(--color-accent-primary);\n color: var(--color-static-white);\n border-color: var(--color-accent-primary);\n}\n.nexus-page-btn--inactive {\n color: var(--color-text-primary);\n}\n.nexus-page-btn--inactive:hover {\n background: var(--color-surface-hover);\n}\n.nexus-page-icon--sm {\n width: 0.875rem;\n height: 0.875rem;\n}\n.nexus-page-icon--md {\n width: 1rem;\n height: 1rem;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Tab\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-tab-list {\n position: relative;\n display: flex;\n border-bottom: 1px solid var(--color-border-default);\n}\n.nexus-tab-list--pill {\n gap: var(--spacing-gap-xs, 0.25rem);\n border-bottom: none;\n background: var(--color-surface-hover);\n border-radius: var(--radius-corner-lg, 0.5rem);\n padding: 0.25rem;\n}\n.nexus-tab-trigger {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n white-space: nowrap;\n font-weight: 500;\n user-select: none;\n outline: none;\n transition-property: color, background-color, border-color;\n transition-duration: 150ms;\n border: none;\n background: transparent;\n cursor: pointer;\n font-family: inherit;\n padding: 0;\n margin: 0;\n}\n.nexus-tab-trigger--line {\n padding: 0.625rem var(--spacing-padding-md, 1rem);\n color: var(--color-text-tertiary);\n border-bottom: 2px solid transparent;\n margin-bottom: -1px;\n}\n.nexus-tab-trigger--line:hover {\n color: var(--color-text-primary);\n}\n.nexus-tab-trigger--line-active {\n color: var(--color-text-primary);\n border-bottom-color: var(--color-accent-primary);\n}\n.nexus-tab-trigger--pill {\n padding: 0.375rem var(--spacing-padding-sm, 0.75rem);\n border-radius: var(--radius-corner-md, 0.375rem);\n color: var(--color-text-tertiary);\n}\n.nexus-tab-trigger--pill:hover {\n color: var(--color-text-primary);\n}\n.nexus-tab-trigger--pill-active {\n color: var(--color-text-primary);\n background: var(--color-surface-default);\n box-shadow: var(--shadow-comp-sm);\n}\n.nexus-tab-trigger--sm {\n font-size: var(--text-text-xs, 0.75rem);\n}\n.nexus-tab-trigger--md {\n font-size: var(--text-text-sm, 0.875rem);\n}\n.nexus-tab-trigger--disabled {\n opacity: 0.4;\n pointer-events: none;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Skeleton\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-skeleton {\n position: relative;\n overflow: hidden;\n background: linear-gradient(\n to right,\n var(--color-surface-hover),\n var(--color-surface-default),\n var(--color-surface-hover)\n );\n background-size: 300% 100%;\n animation: nexus-skeleton-shimmer 2.5s ease-in-out infinite;\n}\n.nexus-skeleton--rect {\n border-radius: var(--radius-corner-md, 0.375rem);\n}\n.nexus-skeleton--circle {\n border-radius: 9999px;\n}\n.nexus-skeleton__children {\n opacity: 0;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Spinner\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-spinner {\n animation: nexus-spin 1s linear infinite;\n color: currentColor;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n ErrorBoundary\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-error-boundary {\n padding: 1rem;\n border-radius: var(--radius-corner-lg, 0.5rem);\n border: 1px solid var(--color-comp-error-border);\n background: var(--color-comp-error-bg);\n color: var(--color-comp-error-text);\n font-size: var(--text-text-sm, 0.875rem);\n}\n.nexus-error-boundary__title {\n margin: 0;\n font-weight: 600;\n}\n.nexus-error-boundary__message {\n margin: 0.5rem 0 0;\n opacity: 0.8;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Divider & Simple components\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-virtual-scroll {\n overflow: auto;\n}\n.nexus-modal-portal-target {\n position: absolute;\n z-index: 9999;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n DataList\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-datalist-center {\n display: flex;\n align-items: center;\n justify-content: center;\n padding-block: var(--spacing-padding-xl, 2rem);\n}\n.nexus-datalist-empty {\n display: flex;\n align-items: center;\n justify-content: center;\n padding-block: var(--spacing-padding-xl, 2rem);\n font-size: var(--text-text-sm, 0.875rem);\n color: var(--color-text-tertiary);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n InfiniteScroll\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-infinite-scroll {\n position: relative;\n}\n.nexus-infinite-sentinel {\n position: relative;\n height: 1px;\n width: 100%;\n}\n.nexus-infinite-spinner {\n display: flex;\n align-items: center;\n justify-content: center;\n padding-block: var(--spacing-padding-md, 1rem);\n}\n.nexus-infinite-spinner-icon {\n width: 1.5rem;\n height: 1.5rem;\n animation: nexus-spin 1s linear infinite;\n border-radius: 9999px;\n border: 2px solid var(--color-border-default);\n border-top-color: var(--color-accent-primary);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Countdown\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-countdown {\n display: inline-flex;\n align-items: center;\n gap: var(--spacing-gap-xs, 0.25rem);\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n font-variant-numeric: tabular-nums;\n}\n.nexus-countdown__separator {\n color: var(--color-text-tertiary);\n margin-inline: 0.125rem;\n}\n.nexus-countdown__label {\n color: var(--color-text-tertiary);\n font-size: var(--text-text-xs, 0.75rem);\n margin-left: 0.125rem;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Select\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-select-trigger {\n position: relative;\n display: flex;\n height: 2.5rem;\n align-items: center;\n justify-content: space-between;\n border-radius: var(--radius-corner-sm, 0.25rem);\n border: 1px solid var(--color-border-default);\n background: var(--color-surface-default, transparent);\n color: var(--color-text-primary);\n font-size: var(--text-text-sm, 0.875rem);\n font-family: inherit;\n cursor: pointer;\n padding: 0;\n margin: 0;\n transition-property: border-color;\n transition-duration: 200ms;\n}\n.nexus-select-trigger:hover {\n border-color: var(--color-border-default-hover);\n box-shadow: 0 0 0 0.5px var(--color-border-default-hover);\n}\n.nexus-select-trigger--open,\n.nexus-select-trigger:focus-within {\n outline: none;\n border-color: var(--color-accent-primary);\n box-shadow: 0 0 0 0.5px var(--color-accent-primary);\n}\n.nexus-select-trigger:has(:disabled) {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.nexus-select-trigger::placeholder {\n color: var(--color-text-tertiary);\n}\n.nexus-select-trigger--default {\n background: var(--color-surface-hover);\n}\n.nexus-select-trigger--outline {\n background: var(--color-surface-default);\n}\n.nexus-select-trigger--sm {\n width: 4rem;\n}\n.nexus-select-trigger--md {\n width: 8rem;\n}\n.nexus-select-trigger--lg {\n width: 12rem;\n}\n.nexus-select-trigger--full {\n width: 100%;\n}\n.nexus-select-trigger--justify-end {\n justify-content: flex-end;\n}\n.nexus-select-trigger__display {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n height: 100%;\n width: calc(100% - 30px);\n align-items: center;\n}\n.nexus-select-trigger__inner {\n display: flex;\n height: 100%;\n width: 100%;\n flex-direction: row-reverse;\n align-items: center;\n justify-content: space-between;\n border-radius: var(--radius-corner-sm, 0.25rem);\n padding: var(--spacing-padding-xs, 0.5rem) var(--spacing-padding-sm, 0.75rem);\n}\n.nexus-select-trigger__inner:focus {\n outline: none;\n}\n.nexus-select-chevron {\n width: 0.75rem;\n height: 0.75rem;\n opacity: 0.5;\n transition: transform 200ms;\n}\n.nexus-select-chevron--open {\n transform: rotate(180deg);\n}\n\n.nexus-select-content {\n position: relative;\n z-index: 50;\n max-height: 24rem;\n overflow: hidden;\n border-radius: var(--radius-corner-sm, 0.25rem);\n border: 1px solid var(--color-border-default);\n background: var(--color-surface-default);\n box-shadow: var(--shadow-comp-lg);\n transform-origin: top center;\n will-change: transform, opacity;\n}\n.nexus-select-content[data-state='open'] {\n animation: nexus-select-slide-in 150ms ease-out;\n}\n.nexus-select-content[data-state='closed'] {\n animation: nexus-select-slide-out 100ms ease-in forwards;\n}\n@keyframes nexus-select-slide-in {\n from {\n opacity: 0;\n transform: translateY(-4px) scaleY(0.96);\n }\n to {\n opacity: 1;\n transform: translateY(0) scaleY(1);\n }\n}\n@keyframes nexus-select-slide-out {\n from {\n opacity: 1;\n transform: translateY(0) scaleY(1);\n }\n to {\n opacity: 0;\n transform: translateY(-4px) scaleY(0.96);\n }\n}\n.nexus-select-content--sm {\n width: 4rem;\n}\n.nexus-select-content--md {\n width: 8rem;\n}\n.nexus-select-content--lg {\n width: 12rem;\n}\n.nexus-select-content--full {\n width: var(--radix-popper-anchor-width);\n}\n.nexus-select-viewport {\n padding: 0.25rem;\n}\n\n.nexus-select-item {\n position: relative;\n display: flex;\n width: 100%;\n cursor: pointer;\n align-items: center;\n border-radius: var(--radius-corner-sm, 0.25rem);\n padding: var(--spacing-padding-xs, 0.5rem) var(--spacing-padding-sm, 0.75rem);\n color: var(--color-text-primary);\n font-size: var(--text-text-sm, 0.875rem);\n transition-property: background-color;\n transition-duration: 150ms;\n outline: none;\n user-select: none;\n}\n.nexus-select-item:hover,\n.nexus-select-item:focus,\n.nexus-select-item[data-highlighted] {\n background: var(--color-surface-hover);\n}\n.nexus-select-item[data-disabled] {\n pointer-events: none;\n opacity: 0.5;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n DropdownMenu\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-dropdown-content {\n position: relative;\n z-index: var(--z-index-layer-dropdown, 10);\n min-width: 10rem;\n overflow: hidden;\n border-radius: var(--radius-corner-md, 0.5rem);\n border: 1px solid var(--color-border-default);\n background: var(--color-surface-default);\n padding: var(--spacing-padding-xs, 0.5rem);\n box-shadow: var(--shadow-comp-lg);\n color: var(--color-text-primary);\n transform-origin: var(--radix-dropdown-menu-content-transform-origin);\n will-change: transform, opacity;\n}\n.nexus-dropdown-content[data-state='open'] {\n animation: nexus-dropdown-in 150ms ease-out;\n}\n.nexus-dropdown-content[data-state='closed'] {\n animation: nexus-dropdown-out 100ms ease-in forwards;\n}\n@keyframes nexus-dropdown-in {\n from {\n opacity: 0;\n transform: scale(0.96);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n@keyframes nexus-dropdown-out {\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0;\n transform: scale(0.96);\n }\n}\n.nexus-dropdown-separator {\n margin: var(--spacing-padding-xs, 0.5rem)\n calc(-1 * var(--spacing-padding-xs, 0.5rem));\n height: 1px;\n background: var(--color-border-default);\n}\n.nexus-dropdown-item {\n position: relative;\n display: flex;\n width: 100%;\n cursor: default;\n align-items: center;\n gap: var(--spacing-gap-sm, 0.5rem);\n border-radius: var(--radius-corner-sm, 0.25rem);\n padding: var(--spacing-padding-xs, 0.5rem) var(--spacing-padding-sm, 0.75rem);\n font-size: var(--text-text-sm, 0.875rem);\n color: var(--color-text-primary);\n outline: none;\n user-select: none;\n transition: background-color 150ms ease;\n}\n.nexus-dropdown-item[data-highlighted] {\n background: var(--color-surface-hover);\n}\n.nexus-dropdown-item[data-disabled] {\n pointer-events: none;\n opacity: var(--opacity-disabled-element, 0.4);\n}\n.nexus-dropdown-item--danger {\n color: var(--color-status-danger);\n}\n.nexus-dropdown-item--danger[data-highlighted] {\n background: var(--color-status-danger-dim);\n color: var(--color-status-danger-intense);\n}\n.nexus-dropdown-item__icon {\n display: inline-flex;\n flex-shrink: 0;\n color: var(--color-icon-secondary);\n}\n.nexus-dropdown-item--danger .nexus-dropdown-item__icon {\n color: var(--color-status-danger);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n ToggleGroup\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-toggle-group {\n display: inline-flex;\n align-items: stretch;\n position: relative;\n border-radius: var(--radius-corner-md, 0.5rem);\n}\n.nexus-toggle-group--default {\n background: var(--color-surface-subtle);\n padding: var(--spacing-padding-2xs, 0.25rem);\n gap: var(--spacing-gap-xs, 0.25rem);\n}\n\n/* \u2500\u2500 Sliding indicator \u2500\u2500 */\n.nexus-toggle-group__indicator {\n position: absolute;\n top: 0;\n left: 0;\n border-radius: var(--radius-corner-sm, 0.25rem);\n background: var(--color-surface-default);\n box-shadow: var(--shadow-sm);\n pointer-events: none;\n z-index: 0;\n will-change: transform, width;\n}\n.nexus-toggle-group__indicator--animated {\n transition:\n transform 200ms cubic-bezier(0, 0, 0.2, 1),\n width 200ms cubic-bezier(0, 0, 0.2, 1);\n}\n.nexus-toggle-group--outline {\n border: 1px solid var(--color-border-default);\n padding: var(--spacing-padding-2xs, 0.25rem);\n gap: 0;\n}\n.nexus-toggle-group__item {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--spacing-gap-xs, 0.25rem);\n border-radius: var(--radius-corner-sm, 0.25rem);\n border: none;\n background: transparent;\n font-size: var(--text-text-sm, 0.875rem);\n font-weight: var(--font-weight-text-medium-sm, 500);\n color: var(--color-text-secondary);\n cursor: pointer;\n transition: color var(--duration-transition-normal, 200ms)\n var(--ease-transition-fast);\n outline: none;\n position: relative;\n z-index: 1;\n}\n.nexus-toggle-group__item:focus-visible {\n box-shadow:\n 0 0 0 2px var(--color-surface-default),\n 0 0 0 4px var(--color-accent-primary-focus);\n}\n.nexus-toggle-group__item[data-disabled] {\n pointer-events: none;\n opacity: var(--opacity-disabled-element, 0.4);\n}\n.nexus-toggle-group--default .nexus-toggle-group__item[data-state='on'] {\n color: var(--color-text-primary);\n}\n.nexus-toggle-group--outline .nexus-toggle-group__item {\n padding-inline: var(--spacing-padding-sm, 0.75rem);\n}\n.nexus-toggle-group--outline .nexus-toggle-group__item[data-state='on'] {\n background: var(--color-accent-primary-dim);\n color: var(--color-accent-primary-intense);\n}\n.nexus-toggle-group--outline\n .nexus-toggle-group__item:not([data-state='on']):hover {\n background: var(--color-surface-hover);\n color: var(--color-text-primary);\n}\n.nexus-toggle-group--sm .nexus-toggle-group__item {\n min-height: var(--size-control-sm, 2rem);\n padding-inline: var(--spacing-padding-sm, 0.75rem);\n}\n.nexus-toggle-group--md .nexus-toggle-group__item {\n min-height: var(--size-control-md, 2.5rem);\n padding-inline: var(--spacing-padding-md, 1rem);\n}\n.nexus-toggle-group--lg .nexus-toggle-group__item {\n min-height: var(--size-control-lg, 3rem);\n padding-inline: var(--spacing-padding-lg, 1.5rem);\n}\n.nexus-toggle-group__icon {\n display: inline-flex;\n flex-shrink: 0;\n color: var(--color-icon-secondary);\n}\n.nexus-toggle-group__item[data-state='on'] .nexus-toggle-group__icon {\n color: var(--color-icon-primary);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Slider\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-slider-wrapper {\n display: flex;\n width: 100%;\n flex-direction: column;\n gap: var(--spacing-gap-sm, 0.5rem);\n}\n.nexus-slider__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--spacing-gap-md, 1rem);\n}\n.nexus-slider__label {\n font-size: var(--text-label-md, 0.875rem);\n font-weight: var(--font-weight-label-md, 500);\n color: var(--color-text-primary);\n}\n.nexus-slider__value {\n font-size: var(--text-text-sm, 0.875rem);\n font-variant-numeric: tabular-nums;\n color: var(--color-text-secondary);\n}\n.nexus-slider {\n position: relative;\n display: flex;\n width: 100%;\n touch-action: none;\n user-select: none;\n align-items: center;\n}\n.nexus-slider[data-disabled] {\n opacity: var(--opacity-disabled-element, 0.4);\n pointer-events: none;\n}\n.nexus-slider__track {\n position: relative;\n flex-grow: 1;\n overflow: hidden;\n border-radius: var(--radius-corner-full, 9999px);\n background: var(--color-surface-strong);\n}\n.nexus-slider__range {\n position: absolute;\n height: 100%;\n border-radius: var(--radius-corner-full, 9999px);\n background: var(--color-accent-primary);\n}\n.nexus-slider__thumb {\n display: block;\n flex-shrink: 0;\n border-radius: var(--radius-corner-full, 9999px);\n border: 2px solid var(--color-accent-primary);\n background: var(--color-surface-default);\n box-shadow: var(--shadow-sm);\n outline: none;\n transition:\n box-shadow 150ms ease,\n transform 150ms ease;\n}\n.nexus-slider__thumb:hover {\n box-shadow: var(--shadow-md);\n}\n.nexus-slider__thumb:focus-visible {\n box-shadow:\n 0 0 0 2px var(--color-surface-default),\n 0 0 0 4px var(--color-accent-primary-focus);\n}\n.nexus-slider--sm .nexus-slider__track {\n height: 0.25rem;\n}\n.nexus-slider--sm .nexus-slider__thumb {\n width: 0.875rem;\n height: 0.875rem;\n}\n.nexus-slider--md .nexus-slider__track {\n height: 0.375rem;\n}\n.nexus-slider--md .nexus-slider__thumb {\n width: 1.125rem;\n height: 1.125rem;\n}\n.nexus-slider--lg .nexus-slider__track {\n height: 0.5rem;\n}\n.nexus-slider--lg .nexus-slider__thumb {\n width: 1.25rem;\n height: 1.25rem;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Tooltip\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-tooltip-content {\n z-index: 50;\n display: flex;\n overflow: hidden;\n border-radius: var(--radius-corner-md, 0.375rem);\n padding: var(--spacing-padding-xs, 0.5rem) var(--spacing-padding-sm, 0.75rem);\n font-size: var(--text-text-sm, 0.875rem);\n}\n.nexus-tooltip--light {\n border: 1px solid var(--color-border-default);\n background: var(--color-static-white);\n color: var(--color-static-black);\n box-shadow: var(--shadow-comp-md);\n}\n.nexus-tooltip--dark {\n border: none;\n background: var(--color-static-black);\n color: var(--color-static-white);\n}\n.nexus-tooltip-arrow--dark {\n fill: var(--color-static-black);\n}\n.nexus-tooltip-arrow--light {\n fill: var(--color-static-white);\n}\n.nexus-tooltip-trigger {\n cursor: default;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Popover\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-popover-content {\n z-index: 50;\n border-radius: var(--radius-corner-lg, 0.5rem);\n border: 1px solid var(--color-border-default);\n padding: var(--spacing-padding-md, 1rem);\n box-shadow: var(--shadow-comp-lg);\n outline: none;\n background: var(--color-surface-default);\n color: var(--color-text-primary);\n transform-origin: var(--radix-popover-content-transform-origin);\n will-change: transform, opacity;\n}\n.nexus-popover-content[data-state='open'] {\n animation: nexus-popover-in 150ms ease-out;\n}\n.nexus-popover-content[data-state='closed'] {\n animation: nexus-popover-out 100ms ease-in forwards;\n}\n@keyframes nexus-popover-in {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n@keyframes nexus-popover-out {\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0;\n transform: scale(0.95);\n }\n}\n.nexus-popover-arrow {\n fill: var(--color-surface-default);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Drawer\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-drawer-overlay {\n position: fixed;\n inset: 0;\n z-index: 50;\n background: var(--color-comp-overlay);\n}\n.nexus-drawer-overlay--blur-sm {\n backdrop-filter: blur(4px);\n}\n.nexus-drawer-overlay--blur-md {\n backdrop-filter: blur(12px);\n}\n.nexus-drawer-content {\n position: fixed;\n z-index: 50;\n display: flex;\n flex-direction: column;\n background: var(--color-surface-default);\n}\n.nexus-drawer-content--bottom {\n inset-inline: 0;\n bottom: 0;\n margin-top: 6rem;\n border-top-left-radius: 1rem;\n border-top-right-radius: 1rem;\n border-top: 1px solid var(--color-border-default);\n}\n.nexus-drawer-content--top {\n inset-inline: 0;\n top: 0;\n margin-bottom: 6rem;\n border-bottom-left-radius: 1rem;\n border-bottom-right-radius: 1rem;\n border-bottom: 1px solid var(--color-border-default);\n}\n.nexus-drawer-content--left {\n inset-block: 0;\n left: 0;\n margin-right: 6rem;\n width: 85vw;\n max-width: 24rem;\n border-top-right-radius: 1rem;\n border-bottom-right-radius: 1rem;\n border-right: 1px solid var(--color-border-default);\n}\n.nexus-drawer-content--right {\n inset-block: 0;\n right: 0;\n margin-left: 6rem;\n width: 85vw;\n max-width: 24rem;\n border-top-left-radius: 1rem;\n border-bottom-left-radius: 1rem;\n border-left: 1px solid var(--color-border-default);\n}\n.nexus-drawer-handle {\n display: flex;\n justify-content: center;\n}\n.nexus-drawer-handle--bottom {\n padding-top: var(--spacing-padding-md, 1rem);\n}\n.nexus-drawer-handle--top {\n padding-bottom: var(--spacing-padding-md, 1rem);\n}\n.nexus-drawer-handle__bar {\n background: var(--color-border-strong);\n height: 0.375rem;\n width: 3rem;\n border-radius: 9999px;\n}\n.nexus-drawer-title {\n font-size: var(--text-text-lg, 1.125rem);\n font-weight: 600;\n color: var(--color-text-primary);\n}\n.nexus-drawer-description {\n font-size: var(--text-text-sm, 0.875rem);\n color: var(--color-text-secondary);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Accordion\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-accordion-item {\n border-bottom: 1px solid var(--color-border-default);\n}\n.nexus-accordion-header {\n display: flex;\n}\n.nexus-accordion-trigger {\n display: flex;\n flex: 1;\n align-items: center;\n justify-content: space-between;\n padding: 0;\n padding-block: var(--spacing-padding-md, 1rem);\n margin: 0;\n border: none;\n background: transparent;\n cursor: pointer;\n font: inherit;\n color: inherit;\n text-align: left;\n transition: all 150ms;\n}\n.nexus-accordion-trigger[data-state='open'] > .nexus-accordion-chevron {\n transform: rotate(180deg);\n}\n.nexus-accordion-chevron {\n width: 0.75rem;\n height: 0.75rem;\n flex-shrink: 0;\n transition: transform 200ms;\n}\n.nexus-accordion-content {\n overflow: hidden;\n transition: all 200ms;\n}\n.nexus-accordion-content[data-state='open'] {\n animation: nexus-accordion-down 200ms ease-out;\n}\n.nexus-accordion-content[data-state='closed'] {\n animation: nexus-accordion-up 200ms ease-in;\n}\n.nexus-accordion-content__inner {\n padding-top: 0;\n padding-bottom: var(--spacing-padding-md, 1rem);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Ellipsis\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-ellipsis {\n position: relative;\n}\n.nexus-ellipsis__content {\n overflow: hidden;\n transition: height 300ms;\n}\n.nexus-ellipsis__trigger {\n margin-top: 0.25rem;\n display: flex;\n align-items: center;\n gap: var(--spacing-gap-xs, 0.25rem);\n font-size: var(--text-text-sm, 0.875rem);\n color: var(--color-text-secondary);\n transition-property: color;\n transition-duration: 150ms;\n}\n.nexus-ellipsis__trigger:hover {\n color: var(--color-text-primary);\n}\n.nexus-ellipsis__trigger--expanded > svg {\n transform: rotate(180deg);\n}\n.nexus-ellipsis__chevron {\n width: 0.875rem;\n height: 0.875rem;\n transition: transform 200ms;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Marquee\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-marquee {\n overflow: hidden;\n}\n.nexus-marquee--pause-on-hover:hover > div {\n animation-play-state: paused !important;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Carousel\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-carousel {\n position: relative;\n}\n.nexus-carousel__viewport {\n overflow: hidden;\n}\n.nexus-carousel__container {\n display: flex;\n}\n.nexus-carousel-slide {\n min-width: 0;\n flex-shrink: 0;\n flex-grow: 0;\n flex-basis: 100%;\n}\n.nexus-carousel-btn {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 10;\n width: 2rem;\n height: 2rem;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 9999px;\n background: var(--color-surface-default);\n border: 1px solid var(--color-border-default);\n box-shadow: var(--shadow-comp-sm);\n color: var(--color-text-primary);\n cursor: pointer;\n font: inherit;\n padding: 0;\n margin: 0;\n transition-property: background-color;\n transition-duration: 150ms;\n}\n.nexus-carousel-btn:hover {\n background: var(--color-surface-hover);\n}\n.nexus-carousel-btn:disabled {\n opacity: 0.4;\n pointer-events: none;\n}\n.nexus-carousel-btn--prev {\n left: 0.5rem;\n}\n.nexus-carousel-btn--next {\n right: 0.5rem;\n}\n.nexus-carousel-btn__icon {\n width: 1rem;\n height: 1rem;\n}\n.nexus-carousel-dots {\n display: flex;\n justify-content: center;\n gap: 0.375rem;\n margin-top: var(--spacing-padding-sm, 0.75rem);\n}\n.nexus-carousel-dot {\n width: 0.5rem;\n height: 0.5rem;\n border-radius: 9999px;\n border: none;\n padding: 0;\n cursor: pointer;\n transition-property: background-color;\n transition-duration: 150ms;\n}\n.nexus-carousel-dot--active {\n background: var(--color-accent-primary);\n}\n.nexus-carousel-dot--inactive {\n background: var(--color-border-default);\n}\n.nexus-carousel-dot--inactive:hover {\n background: var(--color-text-tertiary);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Toast\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-toast {\n display: flex;\n align-items: center;\n gap: var(--spacing-gap-sm, 0.75rem);\n border-radius: var(--radius-corner-lg, 0.5rem);\n border: 1px solid var(--color-border-default);\n padding: var(--spacing-padding-sm, 0.75rem) var(--spacing-padding-md, 1rem);\n box-shadow: var(--shadow-comp-lg);\n background: var(--color-surface-default);\n color: var(--color-text-primary);\n}\n.nexus-toast__title {\n font-size: var(--text-text-sm, 0.875rem);\n font-weight: 500;\n}\n.nexus-toast__desc {\n font-size: var(--text-text-xs, 0.75rem);\n color: var(--color-text-secondary);\n}\n.nexus-toast--success {\n border-color: color-mix(\n in srgb,\n var(--color-status-positive) 30%,\n transparent\n );\n background: color-mix(in srgb, var(--color-status-positive) 10%, transparent);\n color: var(--color-status-positive);\n}\n.nexus-toast--error {\n border-color: color-mix(in srgb, var(--color-status-danger) 30%, transparent);\n background: color-mix(in srgb, var(--color-status-danger) 10%, transparent);\n color: var(--color-status-danger);\n}\n.nexus-toast--warning {\n border-color: color-mix(\n in srgb,\n var(--color-status-caution) 30%,\n transparent\n );\n background: color-mix(in srgb, var(--color-status-caution) 10%, transparent);\n color: var(--color-status-caution);\n}\n.nexus-toast--info {\n border-color: color-mix(\n in srgb,\n var(--color-accent-primary) 30%,\n transparent\n );\n background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent);\n color: var(--color-accent-primary);\n}\n.nexus-toast__action-btn {\n background: var(--color-accent-primary);\n color: var(--color-accent-on-primary);\n border-radius: var(--radius-corner-sm, 0.25rem);\n padding: 0.375rem var(--spacing-padding-sm, 0.75rem);\n font-size: var(--text-text-xs, 0.75rem);\n font-weight: 500;\n}\n.nexus-toast__cancel-btn {\n background: var(--color-surface-hover);\n color: var(--color-text-secondary);\n border-radius: var(--radius-corner-sm, 0.25rem);\n padding: 0.375rem var(--spacing-padding-sm, 0.75rem);\n font-size: var(--text-text-xs, 0.75rem);\n font-weight: 500;\n}\n.nexus-toast__close-btn {\n color: var(--color-text-tertiary);\n}\n.nexus-toast__close-btn:hover {\n color: var(--color-text-primary);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Table\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-table-wrap {\n overflow-x: auto;\n}\n.nexus-table {\n width: 100%;\n}\n.nexus-table-thead {\n display: flex;\n background: var(--color-surface-default);\n}\n.nexus-table-th {\n display: flex;\n}\n.nexus-table-th--sortable {\n cursor: pointer;\n}\n.nexus-table-th__sort-btn {\n display: inline-flex;\n align-items: center;\n gap: var(--spacing-gap-xs, 0.25rem);\n background: none;\n border: none;\n padding: 0;\n margin: 0;\n font: inherit;\n color: inherit;\n cursor: pointer;\n text-align: inherit;\n width: 100%;\n}\n.nexus-table-sort-icon {\n width: 1rem;\n height: 1rem;\n}\n.nexus-table-center {\n display: flex;\n align-items: center;\n justify-content: center;\n padding-block: 3rem;\n}\n.nexus-table-nodata {\n color: var(--color-text-tertiary);\n}\n.nexus-table-loading-icon {\n width: 2rem;\n height: 2rem;\n animation: nexus-spin 1s linear infinite;\n border-radius: 9999px;\n border: 2px solid var(--color-border-default);\n border-top-color: var(--color-accent-primary);\n}\n.nexus-table-skeleton-row {\n display: flex;\n cursor: default;\n}\n.nexus-table-skeleton-td {\n height: 100%;\n width: 100%;\n padding-block: var(--spacing-padding-md, 1rem);\n}\n.nexus-table-skeleton-bar {\n height: 1rem;\n width: 100%;\n}\n\n/* TableRow */\n.nexus-table-row {\n border-bottom: 1px solid var(--color-border-default);\n display: flex;\n min-width: 0;\n}\n.nexus-table-row::-webkit-scrollbar {\n display: none;\n}\n.nexus-table-row--default:hover {\n background: var(--color-surface-hover);\n}\n.nexus-table-row--accent:hover {\n background: color-mix(in srgb, var(--color-accent-primary) 5%, transparent);\n}\n\n/* TdColumn */\n.nexus-td {\n min-width: 0;\n width: 100%;\n}\n.nexus-td__inner {\n border-radius: var(--radius-corner-md, 0.375rem);\n transition-property: background-color;\n transition-duration: 150ms;\n}\n.nexus-td__inner--flex {\n display: flex;\n}\n.nexus-td__inner--highlight {\n background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent);\n outline: 1px dashed var(--color-accent-primary);\n outline-offset: -1px;\n}\n.nexus-td--nowrap {\n white-space: nowrap;\n}\n.nexus-td--truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.nexus-td--wrap {\n white-space: normal;\n overflow-wrap: break-word;\n}\n.nexus-td--break-all {\n white-space: normal;\n word-break: break-all;\n}\n.nexus-td--center {\n text-align: center;\n justify-content: center;\n}\n.nexus-td--left {\n text-align: left;\n justify-content: flex-start;\n}\n.nexus-td--right {\n text-align: right;\n justify-content: flex-end;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Modal\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-modal-wrap {\n pointer-events: none;\n position: fixed;\n inset: 0;\n z-index: 99999;\n display: flex;\n height: 100%;\n align-items: center;\n justify-content: center;\n color: var(--color-text-primary);\n}\n.nexus-modal-wrap--bottom-sheet {\n align-items: flex-end;\n}\n.nexus-modal-wrap--slide-left {\n height: 100%;\n justify-content: flex-start;\n}\n.nexus-modal-wrap--slide-right {\n height: 100%;\n justify-content: flex-end;\n}\n.nexus-modal-wrap--full-page,\n.nexus-modal-wrap--full-page-reverse {\n height: 100%;\n justify-content: flex-start;\n}\n\n.nexus-modal-inner {\n position: relative;\n z-index: 2;\n overflow: hidden;\n pointer-events: auto;\n border-radius: var(--radius-corner-lg, 12px);\n border: 1px solid var(--color-border-default);\n background: var(--color-surface-default);\n color: var(--color-text-primary);\n}\n:where(.nexus-modal-inner) {\n width: 100%;\n min-height: 200px;\n}\n.nexus-modal-inner > div {\n display: contents;\n}\n@media (min-width: 640px) {\n :where(.nexus-modal-inner) {\n width: 480px;\n min-height: auto;\n }\n}\n.nexus-modal-inner--bottom-sheet {\n margin: 0;\n width: 100%;\n border-top-left-radius: 1rem;\n border-top-right-radius: 1rem;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n border-top: 1px solid var(--color-border-default);\n padding: 1.5rem 1rem 0;\n}\n.nexus-modal-inner--slide-left,\n.nexus-modal-inner--slide-right {\n height: 100%;\n border-radius: 0;\n}\n.nexus-modal-inner--full-page,\n.nexus-modal-inner--full-page-reverse {\n height: 100%;\n width: 100%;\n border-radius: 0;\n border-color: transparent;\n}\n@media (min-width: 640px) {\n .nexus-modal-inner--full-page,\n .nexus-modal-inner--full-page-reverse {\n width: 100%;\n }\n}\n.nexus-modal-inner--draggable {\n min-width: 320px;\n overflow: visible;\n}\n.nexus-modal-inner--has-footer {\n padding-bottom: 88px;\n}\n.nexus-modal-inner--bottom-sheet.nexus-modal-inner--has-footer {\n padding-bottom: 5rem;\n}\n\n.nexus-modal-header {\n position: relative;\n padding: 1.5rem 1.25rem 0;\n}\n.nexus-modal-header--bottom-sheet {\n padding: 0;\n}\n.nexus-modal-header--draggable {\n cursor: grab;\n user-select: none;\n}\n.nexus-modal-header--draggable:active {\n cursor: grabbing;\n}\n\n.nexus-modal-close-btn {\n position: absolute;\n top: 1.5rem;\n right: 1.25rem;\n z-index: 1;\n margin-left: auto;\n display: flex;\n cursor: pointer;\n align-items: center;\n justify-content: flex-end;\n border: none;\n background: transparent;\n padding: 0;\n}\n.nexus-modal-close-btn--bottom-sheet {\n position: relative;\n top: 0;\n right: 0;\n}\n.nexus-modal-close-icon {\n width: 1.25rem;\n height: 1.25rem;\n color: var(--color-text-muted);\n}\n\n.nexus-modal-title {\n margin: 0;\n padding-right: 42px;\n font-size: var(--text-text-lg, 1.125rem);\n font-weight: 600;\n line-height: 26px;\n letter-spacing: -0.002em;\n color: var(--color-text-primary);\n}\n.nexus-modal-title--bottom-sheet {\n padding-top: 0.375rem;\n line-height: 1.75rem;\n letter-spacing: -0.012em;\n}\n.nexus-modal-desc {\n color: var(--color-text-muted);\n font-size: var(--text-text-xs, 0.75rem);\n margin-top: 0.25rem;\n}\n\n.nexus-modal-body {\n position: relative;\n overflow-y: auto;\n padding: 1.5rem 1.25rem 0;\n}\n.nexus-modal-body::-webkit-scrollbar {\n display: none;\n}\n.nexus-modal-body--no-footer {\n padding-bottom: 1.5rem;\n}\n.nexus-modal-body--bottom-sheet {\n margin-top: 1.5rem;\n max-height: calc(100vh - 108px);\n padding: 0 0 1.5rem;\n}\n.nexus-modal-body--slide,\n.nexus-modal-body--full-page {\n height: 100%;\n max-height: 100%;\n overflow-y: auto;\n}\n.nexus-modal-body--full-page {\n padding-bottom: 0;\n}\n\n.nexus-modal-footer {\n position: absolute;\n bottom: 0;\n left: 0;\n z-index: 2;\n display: flex;\n width: 100%;\n padding: 1.5rem 1.25rem 1.25rem;\n}\n.nexus-modal-footer button {\n height: 3rem;\n flex: 1;\n}\n.nexus-modal-footer--bottom-sheet {\n padding: 0.75rem 1rem 1.5rem;\n}\n.nexus-modal-footer--draggable {\n position: relative;\n}\n\n.nexus-modal-dim {\n pointer-events: auto;\n position: fixed;\n inset: 0;\n z-index: 1;\n display: block;\n height: 100vh;\n width: 100vw;\n background: color-mix(\n in srgb,\n var(--color-static-black, #000) 75%,\n transparent\n );\n}\n.nexus-modal-dim--hidden {\n display: none;\n}\n.nexus-modal-dim--draggable {\n background: color-mix(\n in srgb,\n var(--color-static-black, #000) 30%,\n transparent\n );\n}\n\n.nexus-modal-bottom-sheet-handle {\n display: flex;\n width: 100%;\n justify-content: center;\n padding-top: 0.75rem;\n padding-bottom: 0.5rem;\n}\n.nexus-modal-bottom-sheet-bar {\n background: var(--color-border-default);\n height: 0.375rem;\n width: 4rem;\n border-radius: 9999px;\n}\n\n.nexus-modal-component {\n opacity: 0;\n}\n.nexus-modal-component--visible {\n opacity: 1;\n}\n.nexus-modal-component--portal {\n position: relative;\n}\n.nexus-modal-component--enter .nexus-modal-inner {\n animation-direction: var(--modal-animation-direction);\n animation-duration: var(--modal-animation-duration);\n animation-name: var(--modal-animation-name);\n animation-timing-function: var(--modal-animation-timing-function);\n}\n.nexus-modal-component--leave .nexus-modal-inner {\n animation-direction: reverse;\n animation-duration: var(--modal-animation-duration);\n animation-fill-mode: var(--modal-animation-fill-mode);\n animation-name: var(--modal-animation-name);\n animation-timing-function: var(--modal-animation-timing-function);\n}\n\n.nexus-contents {\n display: contents;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Animation utilities (Radix enter/exit)\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-animate-in {\n animation: nexus-enter 200ms ease-out;\n --nx-enter-opacity: 1;\n --nx-enter-scale: 1;\n --nx-enter-translate-x: 0;\n --nx-enter-translate-y: 0;\n}\n.nexus-animate-out {\n animation: nexus-exit 150ms ease-in forwards;\n --nx-exit-opacity: 1;\n --nx-exit-scale: 1;\n --nx-exit-translate-x: 0;\n --nx-exit-translate-y: 0;\n}\n.nexus-fade-in-0 {\n --nx-enter-opacity: 0;\n}\n.nexus-fade-out-0 {\n --nx-exit-opacity: 0;\n}\n.nexus-zoom-in-95 {\n --nx-enter-scale: 0.95;\n}\n.nexus-zoom-out-95 {\n --nx-exit-scale: 0.95;\n}\n.nexus-slide-in-from-top-2 {\n --nx-enter-translate-y: -0.5rem;\n}\n.nexus-slide-in-from-bottom-2 {\n --nx-enter-translate-y: 0.5rem;\n}\n.nexus-slide-in-from-left-2 {\n --nx-enter-translate-x: -0.5rem;\n}\n.nexus-slide-in-from-right-2 {\n --nx-enter-translate-x: 0.5rem;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Keyframes\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n@keyframes nexus-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes nexus-enter {\n from {\n opacity: var(--nx-enter-opacity, 1);\n transform: translate3d(\n var(--nx-enter-translate-x, 0),\n var(--nx-enter-translate-y, 0),\n 0\n )\n scale3d(\n var(--nx-enter-scale, 1),\n var(--nx-enter-scale, 1),\n var(--nx-enter-scale, 1)\n );\n }\n}\n\n@keyframes nexus-exit {\n to {\n opacity: var(--nx-exit-opacity, 1);\n transform: translate3d(\n var(--nx-exit-translate-x, 0),\n var(--nx-exit-translate-y, 0),\n 0\n )\n scale3d(\n var(--nx-exit-scale, 1),\n var(--nx-exit-scale, 1),\n var(--nx-exit-scale, 1)\n );\n }\n}\n\n@keyframes nexus-accordion-down {\n from {\n height: 0;\n }\n to {\n height: var(--radix-accordion-content-height);\n }\n}\n\n@keyframes nexus-accordion-up {\n from {\n height: var(--radix-accordion-content-height);\n }\n to {\n height: 0;\n }\n}\n\n@keyframes nexus-skeleton-shimmer {\n 0% {\n background-position: 300% 0;\n }\n 100% {\n background-position: -300% 0;\n }\n}\n\n@keyframes modal-fade {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes modal-fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes modal-scale {\n from {\n transform: scale(0);\n }\n to {\n transform: scale(1);\n }\n}\n\n@keyframes modal-small-scale {\n from {\n transform: scale(0.9);\n }\n to {\n transform: scale(1);\n }\n}\n\n@keyframes modal-pop-fade {\n 0% {\n transform: scale(0.95);\n opacity: 0;\n }\n 60% {\n transform: scale(1.03);\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n opacity: 1;\n }\n}\n\n@keyframes modal-bottom-sheet {\n from {\n transform: translateY(calc(100% + 60px));\n }\n to {\n transform: translateY(0);\n }\n}\n\n@keyframes modal-slide-left {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(0);\n }\n}\n\n@keyframes modal-slide-right {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n}\n\n@keyframes modal-full-page {\n from {\n transform: translateY(60%);\n opacity: 0.5;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n@keyframes modal-full-page-reverse {\n from {\n transform: translateY(-60%);\n opacity: 0.5;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n EmptyState\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n gap: var(--spacing-gap-sm, 0.5rem);\n padding: var(--spacing-padding-lg, 1.5rem);\n color: var(--color-text-primary);\n}\n.nexus-empty-state__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: var(--spacing-gap-xs, 0.25rem);\n color: var(--color-icon-muted);\n}\n.nexus-empty-state__default-icon {\n width: var(--size-icon-xl, 2rem);\n height: var(--size-icon-xl, 2rem);\n}\n.nexus-empty-state--sm .nexus-empty-state__default-icon {\n width: var(--size-icon-lg, 1.5rem);\n height: var(--size-icon-lg, 1.5rem);\n}\n.nexus-empty-state--lg .nexus-empty-state__default-icon {\n width: var(--size-control-md, 2.5rem);\n height: var(--size-control-md, 2.5rem);\n}\n.nexus-empty-state__title {\n margin: 0;\n font-size: var(--text-heading-h6, 1rem);\n font-weight: var(--font-weight-heading-h6, 600);\n letter-spacing: var(--letter-spacing-heading-h6, 0);\n color: var(--color-text-primary);\n}\n.nexus-empty-state__description {\n margin: 0;\n max-width: 24rem;\n font-size: var(--text-text-sm, 0.875rem);\n font-weight: var(--font-weight-text-sm, 400);\n letter-spacing: var(--letter-spacing-text-sm, -0.01em);\n color: var(--color-text-secondary);\n}\n.nexus-empty-state__action {\n margin-top: var(--spacing-gap-sm, 0.5rem);\n}\n.nexus-empty-state--sm {\n padding: var(--spacing-padding-md, 1rem);\n gap: var(--spacing-gap-xs, 0.25rem);\n}\n.nexus-empty-state--sm .nexus-empty-state__title {\n font-size: var(--text-text-semibold-sm, 0.875rem);\n}\n.nexus-empty-state--sm .nexus-empty-state__description {\n font-size: var(--text-text-xs, 0.75rem);\n}\n.nexus-empty-state--lg {\n padding: var(--spacing-padding-xl, 2rem);\n gap: var(--spacing-gap-md, 1rem);\n}\n.nexus-empty-state--lg .nexus-empty-state__title {\n font-size: var(--text-heading-h5, 1.125rem);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Breadcrumb\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-breadcrumb {\n font-size: var(--text-text-sm, 0.875rem);\n line-height: 1.25;\n}\n.nexus-breadcrumb__list {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n list-style: none;\n margin: 0;\n padding: 0;\n gap: 0;\n}\n.nexus-breadcrumb__item {\n display: inline-flex;\n align-items: center;\n}\n.nexus-breadcrumb__separator {\n display: inline-flex;\n align-items: center;\n margin: 0 var(--spacing-gap-xs, 0.25rem);\n color: var(--color-icon-tertiary);\n user-select: none;\n}\n.nexus-breadcrumb__separator-icon {\n width: var(--size-icon-xs, 0.75rem);\n height: var(--size-icon-xs, 0.75rem);\n}\n.nexus-breadcrumb__link {\n color: var(--color-text-secondary);\n text-decoration: none;\n transition: color 150ms ease;\n}\n.nexus-breadcrumb__link:hover {\n color: var(--color-text-primary);\n}\n.nexus-breadcrumb__link--btn {\n border: none;\n background: none;\n cursor: pointer;\n font: inherit;\n padding: 0;\n}\n.nexus-breadcrumb__current {\n color: var(--color-text-primary);\n font-weight: var(--font-weight-text-medium-sm, 500);\n}\n.nexus-breadcrumb__ellipsis {\n color: var(--color-text-tertiary);\n user-select: none;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Stepper\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-stepper {\n width: 100%;\n}\n\n/* \u2500\u2500 Horizontal \u2500\u2500 */\n.nexus-stepper--horizontal {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n}\n.nexus-stepper--horizontal .nexus-stepper__step {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n}\n.nexus-stepper--horizontal .nexus-stepper__indicator-wrap {\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 100%;\n justify-content: center;\n}\n.nexus-stepper--horizontal .nexus-stepper__connector {\n flex: 1;\n height: 2px;\n background: var(--color-border-default);\n transition: background var(--duration-transition-normal, 200ms)\n var(--ease-transition-normal);\n}\n.nexus-stepper--horizontal .nexus-stepper__connector--hidden {\n visibility: hidden;\n}\n.nexus-stepper--horizontal .nexus-stepper__connector--completed {\n background: var(--color-accent-primary);\n}\n.nexus-stepper--horizontal .nexus-stepper__content {\n margin-top: var(--spacing-gap-sm, 0.5rem);\n padding: 0 var(--spacing-padding-2xs, 0.25rem);\n}\n\n/* \u2500\u2500 Vertical \u2500\u2500 */\n.nexus-stepper--vertical {\n display: flex;\n flex-direction: column;\n gap: 0;\n}\n.nexus-stepper--vertical .nexus-stepper__step {\n display: flex;\n flex-direction: row;\n align-items: stretch;\n gap: var(--spacing-gap-sm, 0.5rem);\n}\n.nexus-stepper--vertical .nexus-stepper__indicator-wrap {\n display: flex;\n flex-direction: column;\n align-items: center;\n flex-shrink: 0;\n}\n.nexus-stepper--vertical .nexus-stepper__connector {\n width: 2px;\n flex: 1;\n min-height: var(--spacing-padding-sm, 0.75rem);\n background: var(--color-border-default);\n transition: background var(--duration-transition-normal, 200ms)\n var(--ease-transition-normal);\n}\n.nexus-stepper--vertical .nexus-stepper__connector--completed {\n background: var(--color-accent-primary);\n}\n.nexus-stepper--vertical .nexus-stepper__content {\n padding: var(--spacing-padding-xs, 0.5rem) 0;\n}\n\n/* \u2500\u2500 Indicator (\uACF5\uD1B5) \u2500\u2500 */\n.nexus-stepper__indicator {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--size-control-sm, 2rem);\n height: var(--size-control-sm, 2rem);\n border-radius: var(--radius-corner-full, 9999px);\n border: 2px solid var(--color-border-medium);\n background: var(--color-surface-default);\n font-size: var(--text-text-sm, 0.875rem);\n font-weight: var(--font-weight-text-medium-sm, 500);\n color: var(--color-text-secondary);\n transition: all var(--duration-transition-normal, 200ms)\n var(--ease-transition-normal);\n}\n.nexus-stepper--sm .nexus-stepper__indicator {\n width: 1.75rem;\n height: 1.75rem;\n font-size: var(--text-text-xs, 0.75rem);\n}\n.nexus-stepper__check {\n width: var(--size-icon-sm, 1rem);\n height: var(--size-icon-sm, 1rem);\n}\n.nexus-stepper--sm .nexus-stepper__check {\n width: var(--size-icon-xs, 0.75rem);\n height: var(--size-icon-xs, 0.75rem);\n}\n\n/* \u2500\u2500 State colors \u2500\u2500 */\n.nexus-stepper__step--completed .nexus-stepper__indicator {\n border-color: var(--color-accent-primary);\n background: var(--color-accent-primary);\n color: var(--color-accent-on-primary);\n}\n.nexus-stepper__step--active .nexus-stepper__indicator {\n border-color: var(--color-accent-primary);\n color: var(--color-accent-primary);\n background: var(--color-surface-default);\n box-shadow: 0 0 0 3px\n color-mix(in srgb, var(--color-accent-primary) 20%, transparent);\n}\n.nexus-stepper__step--error .nexus-stepper__indicator {\n border-color: var(--color-status-danger);\n color: var(--color-status-danger);\n background: var(--color-surface-default);\n box-shadow: 0 0 0 3px\n color-mix(in srgb, var(--color-status-danger) 20%, transparent);\n}\n.nexus-stepper__step--pending .nexus-stepper__indicator {\n border-color: var(--color-border-default);\n color: var(--color-text-tertiary);\n}\n\n/* \u2500\u2500 Labels \u2500\u2500 */\n.nexus-stepper__label {\n display: block;\n font-size: var(--text-text-sm, 0.875rem);\n font-weight: var(--font-weight-text-medium-sm, 500);\n color: var(--color-text-primary);\n}\n.nexus-stepper--sm .nexus-stepper__label {\n font-size: var(--text-text-xs, 0.75rem);\n}\n.nexus-stepper__description {\n display: block;\n margin-top: var(--spacing-gap-xs, 0.25rem);\n font-size: var(--text-text-xs, 0.75rem);\n color: var(--color-text-secondary);\n}\n.nexus-stepper__step--pending .nexus-stepper__label {\n color: var(--color-text-secondary);\n}\n.nexus-stepper__step--pending .nexus-stepper__description {\n color: var(--color-text-muted);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n TagInput\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-tag-input-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-gap-xs, 0.25rem);\n}\n.nexus-tag-input__label {\n font-size: var(--text-label-md, 0.875rem);\n font-weight: var(--font-weight-label-md, 500);\n color: var(--color-text-primary);\n}\n.nexus-tag-input {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--spacing-gap-xs, 0.25rem);\n padding: var(--spacing-padding-xs, 0.5rem);\n border: var(--border-width-stroke-default, 1px) solid\n var(--color-border-default);\n border-radius: var(--radius-corner-md, 0.5rem);\n background: var(--color-surface-default);\n cursor: text;\n transition: border-color 150ms ease;\n}\n.nexus-tag-input:focus-within {\n border-color: var(--color-border-default-focus, var(--color-accent-primary));\n}\n.nexus-tag-input--disabled {\n opacity: var(--opacity-disabled-element, 0.4);\n cursor: not-allowed;\n pointer-events: none;\n}\n.nexus-tag-input--sm {\n padding: var(--spacing-padding-2xs, 0.25rem);\n gap: 0.125rem;\n font-size: var(--text-text-xs, 0.75rem);\n}\n.nexus-tag-input--md {\n font-size: var(--text-text-sm, 0.875rem);\n}\n.nexus-tag-input--lg {\n padding: var(--spacing-padding-sm, 0.75rem);\n font-size: var(--text-text-base, 1rem);\n}\n.nexus-tag-input__tag {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n padding: 0.125rem 0.5rem;\n border-radius: var(--radius-corner-sm, 0.25rem);\n background: var(--color-surface-subtle);\n color: var(--color-text-primary);\n font-size: inherit;\n line-height: 1.5;\n white-space: nowrap;\n}\n.nexus-tag-input__tag-close {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: transparent;\n cursor: pointer;\n padding: 0;\n margin: 0;\n color: var(--color-icon-tertiary);\n transition: color 150ms;\n}\n.nexus-tag-input__tag-close:hover {\n color: var(--color-icon-primary);\n}\n.nexus-tag-input__tag-close-icon {\n width: 0.75rem;\n height: 0.75rem;\n}\n.nexus-tag-input__input {\n flex: 1;\n min-width: 4rem;\n border: none;\n outline: none;\n background: transparent;\n font: inherit;\n color: var(--color-text-primary);\n padding: 0.125rem 0;\n}\n.nexus-tag-input__input::placeholder {\n color: var(--color-text-muted);\n}\n.nexus-tag-input__description {\n font-size: var(--text-text-xs, 0.75rem);\n color: var(--color-text-secondary);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n NxImage\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-image {\n position: relative;\n overflow: hidden;\n display: block;\n background: var(--color-surface-subtle);\n}\n.nexus-image__fallback {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n min-height: 4rem;\n color: var(--color-icon-muted);\n}\n.nexus-image__fallback-icon {\n width: var(--size-icon-xl, 2rem);\n height: var(--size-icon-xl, 2rem);\n}\n.nexus-image__skeleton {\n position: absolute;\n inset: 0;\n background: linear-gradient(\n 90deg,\n var(--color-surface-subtle) 25%,\n var(--color-surface-default) 50%,\n var(--color-surface-subtle) 75%\n );\n background-size: 200% 100%;\n animation: nexus-shimmer 1.5s infinite;\n}\n.nexus-image__img {\n display: block;\n width: 100%;\n height: 100%;\n opacity: 0;\n transition: opacity 300ms ease;\n}\n.nexus-image__img--loaded {\n opacity: 1;\n}\n.nexus-image__img--cover {\n object-fit: cover;\n}\n.nexus-image__img--contain {\n object-fit: contain;\n}\n.nexus-image__img--fill {\n object-fit: fill;\n}\n.nexus-image__img--none {\n object-fit: none;\n}\n\n@keyframes nexus-shimmer {\n 0% {\n background-position: -200% 0;\n }\n 100% {\n background-position: 200% 0;\n }\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n DatePicker / Calendar\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-datepicker {\n display: inline-block;\n}\n\n/* \u2014 Trigger \u2014 */\n.nexus-datepicker__trigger {\n display: inline-flex;\n align-items: center;\n gap: var(--spacing-gap-sm, 0.5rem);\n padding: var(--spacing-padding-xs, 0.5rem) var(--spacing-padding-sm, 0.75rem);\n border: var(--border-width-stroke-default, 1px) solid\n var(--color-border-default);\n border-radius: var(--radius-corner-md, 0.5rem);\n background: var(--color-surface-default);\n font: inherit;\n font-size: var(--text-text-sm, 0.875rem);\n color: var(--color-text-primary);\n cursor: pointer;\n transition:\n border-color 150ms,\n box-shadow 150ms;\n min-width: 10rem;\n}\n.nexus-datepicker__trigger:hover {\n border-color: var(--color-border-default-hover);\n box-shadow: 0 0 0 0.5px var(--color-border-default-hover);\n}\n.nexus-datepicker__trigger:focus-visible,\n.nexus-datepicker__trigger[data-state='open'] {\n outline: none;\n border-color: var(--color-accent-primary);\n box-shadow: 0 0 0 0.5px var(--color-accent-primary);\n}\n.nexus-datepicker__trigger:disabled {\n opacity: var(--opacity-disabled-element, 0.4);\n cursor: not-allowed;\n}\n.nexus-datepicker__trigger--placeholder span {\n color: var(--color-text-muted);\n}\n.nexus-datepicker__trigger--has-value {\n border-color: var(--color-border-default-hover);\n}\n.nexus-datepicker__icon {\n width: var(--size-icon-sm, 1rem);\n height: var(--size-icon-sm, 1rem);\n flex-shrink: 0;\n color: var(--color-icon-secondary);\n transition: color 150ms;\n}\n\n/* \u2014 Popover (Radix Portal \uAE30\uBC18 \u2014 position\uC740 Radix\uAC00 \uC778\uB77C\uC778\uC73C\uB85C \uCC98\uB9AC) \u2014 */\n.nexus-datepicker__popover {\n z-index: var(--z-index-layer-popover, 30);\n background: var(--color-surface-default);\n border: var(--border-width-stroke-default, 1px) solid\n var(--color-border-default);\n border-radius: var(--radius-corner-lg, 0.75rem);\n box-shadow: var(--shadow-xl, 0 4px 15px -3px rgb(0 0 0 / 0.12));\n padding: var(--spacing-padding-sm, 0.75rem) var(--spacing-padding-md, 1rem)\n var(--spacing-padding-md, 1rem);\n animation: nexus-datepicker-enter-bottom 200ms cubic-bezier(0, 0, 0.2, 1);\n}\n\n/* \u2014 Calendar \u2014 */\n.nexus-calendar {\n position: relative;\n font-size: var(--text-text-sm, 0.875rem);\n}\n.nexus-calendar__months {\n display: flex;\n flex-direction: column;\n}\n\n/* \u2014 Caption (Month/Year) \u2014 \uC67C\uCABD \uC815\uB82C, nav\uACFC \uAC19\uC740 \uC904 */\n.nexus-calendar__caption {\n display: flex;\n align-items: center;\n height: 2.5rem;\n font-weight: var(--font-weight-heading-h6, 600);\n font-size: var(--text-text-base, 1rem);\n color: var(--color-text-primary);\n letter-spacing: -0.01em;\n}\n\n/* \u2014 Nav Buttons \u2014 \uC624\uB978\uCABD, \uCEA1\uC158\uACFC \uC218\uC9C1 \uC911\uC559 \uC815\uB82C */\n.nexus-calendar__nav {\n position: absolute;\n top: 0;\n right: 0;\n height: 2.5rem;\n display: flex;\n align-items: center;\n gap: var(--spacing-gap-xs, 0.25rem);\n}\n.nexus-calendar__nav-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 2rem;\n height: 2rem;\n border: none;\n background: transparent;\n border-radius: var(--radius-corner-full, 9999px);\n cursor: pointer;\n color: var(--color-icon-tertiary);\n transition:\n background 150ms,\n color 150ms;\n}\n.nexus-calendar__nav-btn svg {\n width: 1.125rem;\n height: 1.125rem;\n stroke-width: 2;\n}\n.nexus-calendar__nav-btn:hover {\n background: color-mix(in srgb, var(--color-accent-primary) 12%, transparent);\n color: var(--color-accent-primary);\n}\n.nexus-calendar__nav-btn:active {\n background: color-mix(in srgb, var(--color-accent-primary) 20%, transparent);\n}\n\n/* \u2014 Grid \u2014 table \uACE0\uC720 \uB808\uC774\uC544\uC6C3 \uC0AC\uC6A9 (\uBE48 \uC140\uB3C4 \uB108\uBE44 \uC720\uC9C0) */\n.nexus-calendar__grid {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0 2px;\n}\n\n/* \u2014 Weekday Header \u2014 */\n.nexus-calendar__head-cell {\n width: 2.5rem;\n height: 2.25rem;\n text-align: center;\n vertical-align: middle;\n font-size: var(--text-text-xs, 0.75rem);\n font-weight: var(--font-weight-label-md, 500);\n color: var(--color-text-secondary);\n}\n\n/* \u2014 Day Cell \u2014 */\n.nexus-calendar__cell {\n text-align: center;\n vertical-align: middle;\n padding: 0;\n}\n\n/* \u2014 Day Button \u2014 */\n.nexus-calendar__day {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 2.5rem;\n height: 2.5rem;\n border: 2px solid transparent;\n background: transparent;\n border-radius: var(--radius-corner-full, 9999px);\n cursor: pointer;\n font: inherit;\n font-size: var(--text-text-sm, 0.875rem);\n color: var(--color-text-primary);\n position: relative;\n transition:\n background 150ms,\n color 150ms,\n border-color 150ms,\n box-shadow 150ms;\n}\n.nexus-calendar__day:hover {\n background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent);\n}\n.nexus-calendar__day:active {\n background: color-mix(in srgb, var(--color-accent-primary) 18%, transparent);\n}\n\n/* Selected \u2014 \uC9C4\uD55C accent \uCC44\uC6C0 (selected \uD074\uB798\uC2A4\uB294 <td>\uC5D0 \uBD99\uC73C\uBBC0\uB85C \uB0B4\uBD80 button \uB300\uC0C1) */\n.nexus-calendar__day--selected .nexus-calendar__day {\n background: var(--color-accent-primary);\n color: var(--color-accent-on-primary);\n font-weight: var(--font-weight-text-semibold-sm, 600);\n border-color: transparent;\n}\n.nexus-calendar__day--selected .nexus-calendar__day:hover {\n background: var(--color-accent-primary-hover);\n}\n\n/* Today \u2014 \uC5F0\uD55C accent \uBC30\uACBD */\n.nexus-calendar__day--today .nexus-calendar__day {\n background: color-mix(in srgb, var(--color-accent-primary) 14%, transparent);\n color: var(--color-accent-primary);\n font-weight: var(--font-weight-text-semibold-sm, 600);\n}\n.nexus-calendar__day--today .nexus-calendar__day:hover {\n background: color-mix(in srgb, var(--color-accent-primary) 22%, transparent);\n}\n.nexus-calendar__day--today.nexus-calendar__day--selected .nexus-calendar__day {\n background: var(--color-accent-primary);\n color: var(--color-accent-on-primary);\n border-color: transparent;\n}\n\n/* Outside month */\n.nexus-calendar__day--outside .nexus-calendar__day {\n color: var(--color-text-muted);\n opacity: 0.35;\n}\n.nexus-calendar__day--outside .nexus-calendar__day:hover {\n opacity: 0.55;\n}\n\n/* Disabled */\n.nexus-calendar__day--disabled .nexus-calendar__day {\n color: var(--color-text-muted);\n opacity: var(--opacity-disabled-element, 0.4);\n cursor: not-allowed;\n pointer-events: none;\n}\n\n@keyframes nexus-datepicker-enter-bottom {\n from {\n opacity: 0;\n transform: translateY(-6px) scale(0.98);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n@keyframes nexus-datepicker-enter-top {\n from {\n opacity: 0;\n transform: translateY(6px) scale(0.98);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n.nexus-datepicker__popover[data-side='bottom'] {\n animation-name: nexus-datepicker-enter-bottom;\n}\n.nexus-datepicker__popover[data-side='top'] {\n animation-name: nexus-datepicker-enter-top;\n}\n@media (prefers-reduced-motion: reduce) {\n .nexus-datepicker__popover {\n animation: none;\n }\n .nexus-calendar__day {\n transition: none;\n }\n .nexus-datepicker__trigger {\n transition: none;\n }\n .nexus-calendar__nav-btn {\n transition: none;\n }\n .nexus-datepicker__icon {\n transition: none;\n }\n}\n\n@keyframes nexus-fade-in {\n from {\n opacity: 0;\n transform: translateY(-4px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* \u2500\u2500\u2500 ImageUpload \u2500\u2500\u2500 */\n.nexus-image-upload__container {\n width: 100%;\n background: var(--color-bg-subtle);\n border-radius: var(--radius-corner-md, 8px);\n overflow: hidden;\n}\n.nexus-image-upload {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--spacing-gap-sm, 0.5rem);\n width: 100%;\n border: 1px dashed var(--color-border-medium);\n border-radius: var(--radius-corner-md, 8px);\n background: transparent;\n cursor: pointer;\n overflow: hidden;\n transition:\n border-color 150ms ease,\n background-color 150ms ease,\n box-shadow 150ms ease;\n outline: none;\n}\n.nexus-image-upload:hover {\n border-color: var(--color-border-default-hover);\n box-shadow: 0 0 0 0.5px var(--color-border-default-hover);\n}\n.nexus-image-upload:focus-visible {\n outline: none;\n border-color: var(--color-accent-primary);\n box-shadow: 0 0 0 0.5px var(--color-accent-primary);\n}\n.nexus-image-upload--dragging {\n border-color: var(--color-accent-primary);\n border-style: solid;\n background: color-mix(\n in srgb,\n var(--color-accent-primary) 6%,\n var(--color-surface-default)\n );\n}\n.nexus-image-upload--disabled {\n opacity: var(--opacity-disabled-element, 0.4);\n cursor: not-allowed;\n pointer-events: none;\n}\n\n.nexus-image-upload--sm {\n padding: var(--spacing-padding-xs, 0.5rem) var(--spacing-padding-sm, 0.75rem);\n min-height: 80px;\n}\n.nexus-image-upload--md {\n padding: var(--spacing-padding-md, 1rem) var(--spacing-padding-sm, 0.75rem);\n min-height: 120px;\n}\n.nexus-image-upload--lg {\n padding: var(--spacing-padding-xl, 2rem) var(--spacing-padding-md, 1rem);\n min-height: 180px;\n}\n\n.nexus-image-upload__icon {\n width: var(--size-icon-xl, 32px);\n height: var(--size-icon-xl, 32px);\n color: var(--color-icon-muted);\n flex-shrink: 0;\n}\n.nexus-image-upload--sm .nexus-image-upload__icon {\n width: var(--size-icon-lg, 24px);\n height: var(--size-icon-lg, 24px);\n}\n\n.nexus-image-upload__text-group {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--spacing-gap-xs, 0.25rem);\n}\n.nexus-image-upload__text {\n font-size: var(--text-text-medium-xs);\n font-weight: var(--font-weight-text-medium-xs, 500);\n line-height: 1.5;\n letter-spacing: var(--letter-spacing-text-medium-xs, -0.01em);\n color: var(--color-text-tertiary);\n white-space: nowrap;\n}\n.nexus-image-upload__format {\n font-size: var(--text-text-xs);\n font-weight: var(--font-weight-text-xs, 400);\n line-height: 1.5;\n letter-spacing: var(--letter-spacing-text-xs, -0.01em);\n color: var(--color-text-tertiary);\n white-space: nowrap;\n}\n.nexus-image-upload__input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n\n/* \u2500\u2500\u2500 ImageUpload: Preview State \u2500\u2500\u2500 */\n.nexus-image-upload--has-preview {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n gap: var(--spacing-gap-md, 1rem);\n padding: 6px 6px 0 0;\n overflow: visible;\n}\n.nexus-image-upload__preview-wrapper {\n position: relative;\n flex-shrink: 0;\n width: 116px;\n height: 116px;\n border-radius: var(--radius-corner-md, 8px);\n border: 1px solid var(--color-border-default);\n overflow: visible;\n}\n.nexus-image-upload--sm .nexus-image-upload__preview-wrapper {\n width: 80px;\n height: 80px;\n}\n.nexus-image-upload--lg .nexus-image-upload__preview-wrapper {\n width: 160px;\n height: 160px;\n}\n.nexus-image-upload__preview {\n width: 100%;\n height: 100%;\n object-fit: cover;\n pointer-events: none;\n border-radius: var(--radius-corner-md, 8px);\n}\n.nexus-image-upload__remove {\n position: absolute;\n top: -6px;\n right: -6px;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n border: none;\n border-radius: var(--radius-corner-full, 9999px);\n background: var(--color-surface-inverted);\n color: var(--color-icon-inverted);\n cursor: pointer;\n transition: opacity 150ms ease;\n z-index: 1;\n}\n.nexus-image-upload__remove:hover {\n opacity: 0.8;\n}\n.nexus-image-upload__remove-icon {\n width: 16px;\n height: 16px;\n}\n\n.nexus-image-upload__info {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--spacing-gap-sm, 0.5rem);\n padding-top: 2px;\n}\n.nexus-image-upload__change-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: var(--size-control-xs, 24px);\n padding: var(--spacing-padding-2xs, 0.25rem) var(--spacing-padding-xs, 0.5rem);\n border: 1px solid var(--color-border-default);\n border-radius: var(--radius-corner-sm, 4px);\n background: var(--color-surface-default);\n font-size: var(--text-label-sm);\n font-weight: var(--font-weight-label-sm, 500);\n color: var(--color-text-primary);\n cursor: pointer;\n white-space: nowrap;\n transition:\n border-color 150ms ease,\n background-color 150ms ease;\n}\n.nexus-image-upload__change-btn:hover {\n border-color: var(--color-border-default-hover);\n background: var(--color-surface-default-hover);\n}\n\n/* \u2500\u2500\u2500 ImageUpload: Field wrapper (label + description) \u2500\u2500\u2500 */\n.nexus-image-upload-field {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-gap-xs, 0.25rem);\n}\n.nexus-image-upload-field__label {\n font-size: var(--text-label-semibold-md);\n font-weight: var(--font-weight-label-semibold-md, 600);\n line-height: 1;\n letter-spacing: var(--letter-spacing-label-semibold-md, 0);\n color: var(--color-text-tertiary);\n}\n.nexus-image-upload-field__description {\n font-size: var(--text-text-xs);\n font-weight: var(--font-weight-text-xs, 400);\n line-height: 1.5;\n letter-spacing: var(--letter-spacing-text-xs, -0.01em);\n color: var(--color-text-tertiary);\n margin: 0;\n}\n";
|
|
2
|
+
var css = "/*\n * @nexus-cross/design-system \u2014 Pure CSS\n *\n * BEM \uD074\uB798\uC2A4 \uB124\uC774\uBC0D(.nexus-*)\uC73C\uB85C CSS specificity \uAE30\uBC18 \uB3D9\uC791.\n * \uC18C\uBE44\uC790 CSS\uB294 \uB514\uC790\uC778 \uC2DC\uC2A4\uD15C \uC774\uD6C4\uC5D0 \uB85C\uB4DC\uB418\uBBC0\uB85C className\uC73C\uB85C \uC624\uBC84\uB77C\uC774\uB4DC \uAC00\uB2A5.\n */\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Component Tokens (:root)\n \uC18C\uBE44\uC790\uAC00 :root\uC5D0\uC11C \uC624\uBC84\uB77C\uC774\uB4DC \uAC00\uB2A5\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n:root {\n /* \u2500\u2500 Button: Color \u2500\u2500 */\n --color-comp-btn-focus-ring: var(--color-accent-primary);\n\n --color-comp-btn-primary-base: var(--color-accent-primary);\n --color-comp-btn-primary-hover: var(--color-accent-primary-hover);\n --color-comp-btn-primary-pressed: var(--color-accent-primary-pressed);\n --color-comp-btn-primary-on: var(--color-accent-on-primary);\n --color-comp-btn-primary-text: var(\n --color-accent-primary-intense,\n var(--color-accent-primary)\n );\n --color-comp-btn-primary-subtle-fill: var(--color-accent-primary-disabled);\n --color-comp-btn-primary-subtle-bg: var(--color-accent-primary-bg);\n\n --color-comp-btn-secondary-base: var(--color-accent-secondary);\n --color-comp-btn-secondary-hover: var(--color-accent-secondary-hover);\n --color-comp-btn-secondary-pressed: var(--color-accent-secondary-pressed);\n --color-comp-btn-secondary-on: var(--color-accent-on-secondary);\n --color-comp-btn-secondary-text: var(\n --color-accent-secondary-intense,\n var(--color-accent-secondary)\n );\n --color-comp-btn-secondary-subtle-fill: var(\n --color-accent-secondary-disabled\n );\n --color-comp-btn-secondary-subtle-bg: var(--color-accent-secondary-bg);\n\n --color-comp-btn-normal-base: var(--color-surface-subtle);\n --color-comp-btn-normal-hover: var(--color-surface-subtle-hover);\n --color-comp-btn-normal-pressed: var(--color-surface-subtle-hover);\n --color-comp-btn-normal-on: var(--color-text-primary);\n --color-comp-btn-normal-text: var(--color-text-primary);\n --color-comp-btn-normal-subtle-fill: var(--color-surface-subtle);\n --color-comp-btn-normal-subtle-bg: var(--color-surface-subtle-hover);\n --color-comp-btn-normal-border: var(--color-border-default);\n --color-comp-btn-normal-border-hover: var(\n --color-border-default-hover,\n var(--color-border-default)\n );\n\n --color-comp-btn-danger-base: var(--color-status-danger);\n --color-comp-btn-danger-hover: var(--color-status-danger-hover);\n --color-comp-btn-danger-pressed: var(--color-status-danger-pressed);\n --color-comp-btn-danger-on: var(--color-static-white);\n --color-comp-btn-danger-text: var(\n --color-status-danger-intense,\n var(--color-status-danger)\n );\n --color-comp-btn-danger-subtle-fill: var(--color-status-danger-disabled);\n --color-comp-btn-danger-subtle-bg: var(--color-status-danger-bg);\n\n /* \u2500\u2500 Button: Radius \u2500\u2500 */\n --radius-comp-btn-xl: 0.75rem;\n --radius-comp-btn-lg: 0.5rem;\n --radius-comp-btn-md: 0.5rem;\n --radius-comp-btn-sm: 0.25rem;\n\n /* \u2500\u2500 Button: Spacing \u2500\u2500 */\n --spacing-comp-btn-gap: var(--spacing-gap-sm, 0.5rem);\n --spacing-comp-btn-xl-h: 3rem;\n --spacing-comp-btn-xl-px: var(--spacing-padding-lg, 1.5rem);\n --spacing-comp-btn-lg-h: 2.5rem;\n --spacing-comp-btn-lg-px: var(--spacing-padding-lg, 1.5rem);\n --spacing-comp-btn-md-h: 1.875rem;\n --spacing-comp-btn-md-px: var(--spacing-padding-sm, 0.75rem);\n --spacing-comp-btn-sm-px: var(--spacing-padding-xs, 0.5rem);\n --spacing-comp-btn-sm-py: var(--spacing-padding-2xs, 0.25rem);\n\n /* \u2500\u2500 Button: Font \u2500\u2500 */\n --text-comp-btn-xl: var(--text-text-base, 1rem);\n --text-comp-btn-lg: var(--text-text-base, 1rem);\n --text-comp-btn-md: var(--text-text-sm, 0.875rem);\n --text-comp-btn-sm: var(--text-text-xs, 0.75rem);\n\n /* \u2500\u2500 Button: Misc \u2500\u2500 */\n --shadow-comp-btn: none;\n --opacity-comp-btn-disabled: 0.5;\n\n /* \u2500\u2500 Shared: Shadow \u2500\u2500 */\n --shadow-comp-sm: var(--shadow-elevation-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));\n --shadow-comp-md: var(--shadow-elevation-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));\n --shadow-comp-lg: var(\n --shadow-elevation-lg,\n 0 10px 15px -3px rgb(0 0 0 / 0.1)\n );\n\n /* \u2500\u2500 Shared: Overlay \u2500\u2500 */\n --color-comp-overlay: var(--color-overlay-dim, rgba(0, 0, 0, 0.6));\n\n /* \u2500\u2500 ErrorBoundary \u2500\u2500 */\n --color-comp-error-border: var(--color-status-danger);\n --color-comp-error-bg: var(--color-status-danger-bg, #fef2f2);\n --color-comp-error-text: var(--color-status-danger-intense, #991b1b);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n \uCEF4\uD3EC\uB10C\uD2B8 \uC2A4\uD0C0\uC77C\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n/* \u2500\u2500\u2500 Shared: sr-only \u2500\u2500\u2500 */\n.nexus-sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Button\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--spacing-comp-btn-gap);\n white-space: nowrap;\n user-select: none;\n box-shadow: var(--shadow-comp-btn);\n transition-property: color, background-color, border-color;\n transition-duration: 200ms;\n border: none;\n background: none;\n cursor: pointer;\n font: inherit;\n color: inherit;\n padding: 0;\n margin: 0;\n text-decoration: none;\n}\n.nexus-btn:disabled,\n.nexus-btn[aria-disabled='true'] {\n pointer-events: none;\n opacity: var(--opacity-comp-btn-disabled);\n}\n.nexus-btn:focus-visible {\n outline: 2px solid\n color-mix(in srgb, var(--color-comp-btn-focus-ring) 50%, transparent);\n outline-offset: 2px;\n}\n\n/* Variant: contained */\n.nexus-btn--contained {\n background: var(--_btn-base);\n color: var(--_btn-on);\n}\n.nexus-btn--contained:hover {\n background: var(--_btn-hover);\n}\n.nexus-btn--contained:active {\n background: var(--_btn-pressed);\n}\n\n/* Variant: outlined */\n.nexus-btn--outlined {\n border: 1px solid var(--_btn-border);\n color: var(--_btn-text);\n background: var(--_btn-outlined-bg);\n}\n.nexus-btn--outlined:hover {\n background: var(--_btn-outlined-hover-bg);\n border-color: var(--_btn-border-hover);\n}\n.nexus-btn--outlined:active {\n background: var(--_btn-outlined-pressed-bg);\n border-color: var(--_btn-border-hover);\n}\n\n/* Variant: subtle */\n.nexus-btn--subtle {\n background: var(--_btn-subtle-fill);\n color: var(--_btn-text);\n}\n.nexus-btn--subtle:hover {\n background: var(--_btn-light-bg);\n}\n.nexus-btn--subtle:active {\n background: var(--_btn-light-bg);\n}\n\n/* Variant: ghost */\n.nexus-btn--ghost {\n background: transparent;\n color: var(--_btn-text);\n}\n.nexus-btn--ghost:hover {\n background: var(--_btn-ghost-hover-bg);\n}\n.nexus-btn--ghost:active {\n background: var(--_btn-ghost-pressed-bg);\n}\n\n/* Sizes */\n.nexus-btn--xl {\n height: var(--spacing-comp-btn-xl-h);\n padding-inline: var(--spacing-comp-btn-xl-px);\n font-size: var(--text-comp-btn-xl);\n font-weight: 600;\n border-radius: var(--radius-comp-btn-xl);\n}\n.nexus-btn--lg {\n height: var(--spacing-comp-btn-lg-h);\n padding-inline: var(--spacing-comp-btn-lg-px);\n font-size: var(--text-comp-btn-lg);\n font-weight: 600;\n border-radius: var(--radius-comp-btn-lg);\n}\n.nexus-btn--md {\n height: var(--spacing-comp-btn-md-h);\n padding-inline: var(--spacing-comp-btn-md-px);\n font-size: var(--text-comp-btn-md);\n font-weight: 500;\n border-radius: var(--radius-comp-btn-md);\n}\n.nexus-btn--sm {\n padding-inline: var(--spacing-comp-btn-sm-px);\n padding-block: var(--spacing-comp-btn-sm-py);\n font-size: var(--text-comp-btn-sm);\n font-weight: 500;\n border-radius: var(--radius-comp-btn-sm);\n}\n\n/* Radius override */\n.nexus-btn--circle {\n border-radius: 9999px !important;\n}\n\n/* Semantic palette \u2014 compound selectors (cascade \uBC29\uC9C0) */\n.nexus-btn--primary {\n --_btn-base: var(--color-comp-btn-primary-base);\n --_btn-hover: var(--color-comp-btn-primary-hover);\n --_btn-pressed: var(--color-comp-btn-primary-pressed);\n --_btn-on: var(--color-comp-btn-primary-on);\n --_btn-text: var(--color-comp-btn-primary-text);\n --_btn-subtle-fill: var(--color-comp-btn-primary-subtle-fill);\n --_btn-light-bg: var(--color-comp-btn-primary-subtle-bg);\n --_btn-border: var(--color-accent-primary-focus, var(--color-accent-primary));\n --_btn-border-hover: var(\n --color-accent-primary-focus,\n var(--color-accent-primary)\n );\n --_btn-outlined-bg: var(--color-surface-default);\n --_btn-outlined-hover-bg: var(--color-comp-btn-primary-subtle-bg);\n --_btn-outlined-pressed-bg: var(--color-surface-default);\n --_btn-ghost-hover-bg: var(--color-comp-btn-primary-subtle-bg);\n --_btn-ghost-pressed-bg: var(--color-comp-btn-primary-subtle-fill);\n}\n.nexus-btn--secondary {\n --_btn-base: var(--color-comp-btn-secondary-base);\n --_btn-hover: var(--color-comp-btn-secondary-hover);\n --_btn-pressed: var(--color-comp-btn-secondary-pressed);\n --_btn-on: var(--color-comp-btn-secondary-on);\n --_btn-text: var(--color-comp-btn-secondary-text);\n --_btn-subtle-fill: var(--color-comp-btn-secondary-subtle-fill);\n --_btn-light-bg: var(--color-comp-btn-secondary-subtle-bg);\n --_btn-border: var(\n --color-accent-secondary-focus,\n var(--color-accent-secondary)\n );\n --_btn-border-hover: var(\n --color-accent-secondary-focus,\n var(--color-accent-secondary)\n );\n --_btn-outlined-bg: var(--color-surface-default);\n --_btn-outlined-hover-bg: var(--color-comp-btn-secondary-subtle-bg);\n --_btn-outlined-pressed-bg: var(--color-surface-default);\n --_btn-ghost-hover-bg: var(--color-comp-btn-secondary-subtle-bg);\n --_btn-ghost-pressed-bg: var(--color-comp-btn-secondary-subtle-fill);\n}\n.nexus-btn--normal {\n --_btn-base: var(--color-comp-btn-normal-base);\n --_btn-hover: var(--color-comp-btn-normal-hover);\n --_btn-pressed: var(--color-comp-btn-normal-pressed);\n --_btn-on: var(--color-comp-btn-normal-on);\n --_btn-text: var(--color-comp-btn-normal-text);\n --_btn-subtle-fill: var(--color-comp-btn-normal-subtle-fill);\n --_btn-light-bg: var(--color-comp-btn-normal-subtle-bg);\n --_btn-border: var(--color-comp-btn-normal-border);\n --_btn-border-hover: var(--color-comp-btn-normal-border-hover);\n --_btn-outlined-bg: var(--color-surface-default);\n --_btn-outlined-hover-bg: var(--color-comp-btn-normal-subtle-bg);\n --_btn-outlined-pressed-bg: var(\n --color-surface-pressed,\n var(--color-surface-strong)\n );\n --_btn-ghost-hover-bg: var(--color-comp-btn-normal-subtle-bg);\n --_btn-ghost-pressed-bg: var(\n --color-surface-pressed,\n var(--color-surface-strong)\n );\n}\n.nexus-btn--danger {\n --_btn-base: var(--color-comp-btn-danger-base);\n --_btn-hover: var(--color-comp-btn-danger-hover);\n --_btn-pressed: var(--color-comp-btn-danger-pressed);\n --_btn-on: var(--color-comp-btn-danger-on);\n --_btn-text: var(--color-comp-btn-danger-text);\n --_btn-subtle-fill: var(--color-comp-btn-danger-subtle-fill);\n --_btn-light-bg: var(--color-comp-btn-danger-subtle-bg);\n --_btn-border: var(--color-status-danger-focus, var(--color-status-danger));\n --_btn-border-hover: var(\n --color-status-danger-focus,\n var(--color-status-danger)\n );\n --_btn-outlined-bg: var(--color-surface-default);\n --_btn-outlined-hover-bg: var(--color-comp-btn-danger-subtle-bg);\n --_btn-outlined-pressed-bg: var(--color-surface-default);\n --_btn-ghost-hover-bg: var(--color-comp-btn-danger-subtle-bg);\n --_btn-ghost-pressed-bg: var(--color-comp-btn-danger-subtle-fill);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n TextInput\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n/* \u2500\u2500 Field wrapper \u2500\u2500 */\n.nexus-text-input-field {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n.nexus-text-input-field__label {\n font-size: var(--text-text-sm, 0.875rem);\n font-weight: 600;\n color: var(--color-text-muted);\n line-height: 1;\n}\n.nexus-text-input-field__footer {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.nexus-text-input-field__description {\n font-size: var(--text-text-xs, 0.75rem);\n color: var(--color-text-muted);\n line-height: 1.5;\n letter-spacing: -0.12px;\n}\n.nexus-text-input-field__description--error {\n color: var(--color-status-danger);\n}\n.nexus-text-input-field__count {\n font-size: var(--text-text-xs, 0.75rem);\n color: var(--color-text-muted);\n margin-left: auto;\n flex-shrink: 0;\n}\n.nexus-text-input-field__count--error {\n color: var(--color-status-danger);\n}\n\n/* \u2500\u2500 Input box \u2500\u2500 */\n.nexus-text-input {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n border-radius: var(--radius-corner-md, 0.5rem);\n border: 1px solid var(--color-border-default);\n background: var(--color-surface-default);\n font-size: var(--text-text-sm, 0.875rem);\n font-weight: 500;\n line-height: 1;\n color: var(--color-text-primary);\n transition:\n border-color 200ms,\n box-shadow 200ms;\n}\n:where(.nexus-text-input) {\n width: 100%;\n}\n.nexus-text-input:hover:not(.nexus-text-input--disabled):not(:focus-within) {\n border-color: var(--color-border-default-hover);\n box-shadow: 0 0 0 0.5px var(--color-border-default-hover);\n}\n.nexus-text-input--default:focus-within {\n border-color: var(--color-accent-primary);\n box-shadow: 0 0 0 0.5px var(--color-accent-primary);\n}\n.nexus-text-input--error {\n border-color: var(--color-status-danger);\n}\n.nexus-text-input--error:focus-within {\n border-color: var(--color-status-danger);\n box-shadow: 0 0 0 0.5px var(--color-status-danger);\n}\n.nexus-text-input--disabled {\n cursor: not-allowed;\n background: var(--color-surface-strong);\n border-color: var(--color-border-medium);\n color: var(--color-text-muted);\n}\n\n/* \u2500\u2500 Sizes \u2500\u2500 */\n.nexus-text-input--xl {\n padding: calc(var(--spacing-padding-md, 1rem) - 1px)\n var(--spacing-padding-md, 1rem);\n font-size: var(--text-text-base, 1rem);\n}\n.nexus-text-input--lg {\n padding: calc(var(--spacing-padding-sm, 0.75rem) - 1px)\n var(--spacing-padding-sm, 0.75rem);\n font-size: var(--text-text-base, 1rem);\n}\n.nexus-text-input--md {\n padding: calc(var(--spacing-padding-xs, 0.5rem) - 1px)\n var(--spacing-padding-sm, 0.75rem);\n font-size: var(--text-text-sm, 0.875rem);\n}\n\n/* \u2500\u2500 Inner elements \u2500\u2500 */\n.nexus-text-input__inner {\n flex: 1;\n min-width: 0;\n padding: 0;\n background: transparent;\n border: none;\n outline: none;\n color: inherit;\n font: inherit;\n}\n.nexus-text-input__inner:focus-visible {\n outline: none;\n}\n.nexus-text-input__inner::placeholder {\n color: var(--color-text-muted);\n}\n.nexus-text-input__icon {\n display: flex;\n flex-shrink: 0;\n color: var(--color-text-muted);\n}\n.nexus-text-input__clear {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 1rem;\n height: 1rem;\n border: none;\n background: transparent;\n color: var(--color-text-muted);\n cursor: pointer;\n padding: 0;\n transition: color 150ms;\n}\n.nexus-text-input__clear:hover {\n color: var(--color-icon-tertiary-hover);\n background: transparent;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n PriceInput\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n/* \u2500\u2500 Field wrapper \u2500\u2500 */\n.nexus-price-input-field {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n.nexus-price-input-field__header {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: 0.5rem;\n}\n.nexus-price-input-field__label {\n font-size: var(--text-text-sm, 0.875rem);\n font-weight: 600;\n color: var(--color-text-tertiary);\n line-height: 1;\n}\n.nexus-price-input-field__balance {\n display: inline-flex;\n align-items: baseline;\n gap: 0.375rem;\n margin-left: auto;\n padding: 0;\n border: none;\n background: transparent;\n font-size: var(--text-text-xs, 0.75rem);\n font-weight: 400;\n color: var(--color-text-tertiary);\n cursor: pointer;\n line-height: 1.5;\n letter-spacing: -0.12px;\n transition: color 150ms;\n}\n.nexus-price-input-field__balance:hover {\n color: var(--color-text-tertiary);\n}\n.nexus-price-input-field__balance:disabled {\n cursor: not-allowed;\n opacity: var(--opacity-disabled-text, 0.5);\n}\n.nexus-price-input-field__balance-value {\n font-weight: 400;\n color: var(--color-text-secondary);\n text-decoration: underline;\n transition: color 150ms;\n}\n.nexus-price-input-field__balance:hover\n .nexus-price-input-field__balance-value {\n color: var(--color-text-primary);\n}\n.nexus-price-input-field__balance-value--exceeded {\n color: var(--color-status-danger);\n}\n.nexus-price-input-field__balance:hover\n .nexus-price-input-field__balance-value--exceeded {\n color: var(--color-status-danger);\n}\n.nexus-price-input-field__description {\n font-size: var(--text-text-xs, 0.75rem);\n color: var(--color-text-tertiary);\n line-height: 1.5;\n letter-spacing: -0.12px;\n}\n.nexus-price-input-field__description--error {\n color: var(--color-status-danger);\n}\n\n/* \u2500\u2500 Input box \u2500\u2500 */\n.nexus-price-input {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n border-radius: var(--radius-corner-md, 0.5rem);\n border: 1px solid var(--color-border-default);\n background: var(--color-surface-default);\n font-size: var(--text-text-sm, 0.875rem);\n font-weight: 500;\n line-height: 1;\n color: var(--color-text-primary);\n transition:\n border-color 200ms,\n box-shadow 200ms;\n}\n:where(.nexus-price-input) {\n width: 100%;\n}\n.nexus-price-input:hover:not(.nexus-price-input--disabled):not(:focus-within) {\n border-color: var(--color-border-default-hover);\n box-shadow: 0 0 0 0.5px var(--color-border-default-hover);\n}\n.nexus-price-input--default:focus-within {\n border-color: var(--color-accent-primary);\n box-shadow: 0 0 0 0.5px var(--color-accent-primary);\n}\n.nexus-price-input--error {\n border-color: var(--color-status-danger);\n}\n.nexus-price-input--error:focus-within {\n border-color: var(--color-status-danger);\n box-shadow: 0 0 0 0.5px var(--color-status-danger);\n}\n.nexus-price-input--disabled {\n cursor: not-allowed;\n background: var(--color-surface-strong);\n border-color: var(--color-border-medium);\n color: var(--color-text-muted);\n}\n\n/* \u2500\u2500 Sizes \u2500\u2500 */\n.nexus-price-input--xl {\n padding: calc(var(--spacing-padding-md, 1rem) - 1px)\n var(--spacing-padding-md, 1rem);\n font-size: var(--text-text-base, 1rem);\n}\n.nexus-price-input--lg {\n padding: calc(var(--spacing-padding-sm, 0.75rem) - 1px)\n var(--spacing-padding-sm, 0.75rem);\n font-size: var(--text-text-base, 1rem);\n}\n.nexus-price-input--md {\n padding: calc(var(--spacing-padding-xs, 0.5rem) - 1px)\n var(--spacing-padding-sm, 0.75rem);\n font-size: var(--text-text-sm, 0.875rem);\n}\n\n/* \u2500\u2500 Inner elements \u2500\u2500 */\n.nexus-price-input__prefix {\n flex-shrink: 0;\n color: var(--color-text-secondary);\n font: inherit;\n user-select: none;\n}\n.nexus-price-input__suffix {\n flex-shrink: 0;\n color: var(--color-text-secondary);\n font: inherit;\n white-space: nowrap;\n user-select: none;\n}\n.nexus-price-input__inner {\n flex: 1;\n min-width: 0;\n padding: 0;\n background: transparent;\n border: none;\n outline: none;\n color: inherit;\n font: inherit;\n}\n.nexus-price-input__inner:focus-visible {\n outline: none;\n}\n.nexus-price-input__inner::placeholder {\n color: var(--color-text-muted);\n}\n.nexus-price-input__inner--right {\n text-align: right;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n TextArea\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n/* \u2500\u2500 Field wrapper \u2500\u2500 */\n.nexus-textarea-field {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n.nexus-textarea-field__label {\n font-size: var(--text-label-semibold-md, 0.875rem);\n font-weight: 600;\n color: var(--color-text-tertiary);\n line-height: 1;\n}\n.nexus-textarea-field__footer {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.nexus-textarea-field__description {\n flex: 1;\n min-width: 0;\n font-size: var(--text-text-xs, 0.75rem);\n color: var(--color-text-tertiary);\n line-height: 1.5;\n letter-spacing: -0.12px;\n}\n.nexus-textarea-field__description--error {\n color: var(--color-status-danger-intense, #d20625);\n}\n.nexus-textarea-field__count {\n font-size: var(--text-text-xs, 0.75rem);\n color: var(--color-text-tertiary);\n line-height: 1.5;\n letter-spacing: -0.12px;\n text-align: right;\n flex-shrink: 0;\n margin-left: auto;\n}\n.nexus-textarea-field__count--error {\n color: var(--color-status-danger-intense, #d20625);\n}\n\n/* \u2500\u2500 Textarea box \u2500\u2500 */\n.nexus-textarea {\n border-radius: var(--radius-corner-md, 0.5rem);\n border: 1px solid var(--color-border-default);\n background: var(--color-surface-default);\n color: var(--color-text-primary);\n font-weight: 500;\n line-height: 1.5;\n transition:\n border-color 200ms,\n box-shadow 200ms;\n resize: none;\n min-height: 100px;\n padding: var(--spacing-padding-sm, 0.75rem);\n}\n:where(.nexus-textarea) {\n width: 100%;\n}\n.nexus-textarea::placeholder {\n color: var(--color-text-muted);\n}\n.nexus-textarea:focus-visible {\n outline: none;\n}\n\n/* Hover */\n.nexus-textarea:hover:not(.nexus-textarea--disabled):not(:focus) {\n border-color: var(--color-border-default-hover);\n box-shadow: 0 0 0 0.5px var(--color-border-default-hover);\n}\n\n/* Focus \u2014 default */\n.nexus-textarea--default:focus {\n border-color: var(--color-accent-primary);\n box-shadow: 0 0 0 0.5px var(--color-accent-primary);\n}\n\n/* Error */\n.nexus-textarea--error {\n border-color: var(--color-status-danger-focus, #e62848);\n box-shadow: 0 0 0 0.5px var(--color-status-danger-focus, #e62848);\n}\n.nexus-textarea--error:focus {\n border-color: var(--color-status-danger-focus, #e62848);\n box-shadow: 0 0 0 0.5px var(--color-status-danger-focus, #e62848);\n}\n\n/* Disabled */\n.nexus-textarea--disabled {\n cursor: not-allowed;\n background: var(\n --color-surface-default-disabled,\n var(--color-surface-strong)\n );\n border-color: var(--color-border-medium);\n color: var(--color-text-muted);\n}\n\n/* \u2500\u2500 Sizes \u2500\u2500 */\n.nexus-textarea--lg {\n font-size: var(--text-text-medium-base, 1rem);\n letter-spacing: -0.16px;\n}\n.nexus-textarea--md {\n font-size: var(--text-text-medium-sm, 0.875rem);\n letter-spacing: -0.14px;\n}\n\n/* \u2500\u2500 Resize modes \u2500\u2500 */\n.nexus-textarea--resize-default {\n resize: vertical;\n}\n.nexus-textarea--resize-auto {\n resize: none;\n overflow: hidden;\n}\n\n/* \u2500\u2500 Custom scrollbar \u2500\u2500 */\n.nexus-textarea:not(.nexus-textarea--resize-auto) {\n overflow-y: auto;\n}\n.nexus-textarea::-webkit-scrollbar {\n width: 5px;\n}\n.nexus-textarea::-webkit-scrollbar-track {\n background: transparent;\n}\n.nexus-textarea::-webkit-scrollbar-thumb {\n background: var(--color-icon-muted, #c6d0da);\n border-radius: var(--radius-corner-full, 9999px);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n NumberInput\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-number-input {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n}\n:where(.nexus-number-input) {\n width: 100%;\n}\n\n/* \u2500\u2500 Header (label + max) \u2500\u2500 */\n.nexus-number-input__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 4px;\n}\n.nexus-number-input__label {\n font-size: var(--text-label-semibold-md, 0.875rem);\n font-weight: var(--font-weight-label-semibold-md, 600);\n line-height: 1;\n color: var(--color-text-tertiary);\n}\n.nexus-number-input__max {\n display: flex;\n align-items: center;\n gap: 4px;\n margin: 0;\n margin-left: auto;\n padding: 0;\n border: none;\n background: none;\n font-size: var(--text-text-xs, 0.75rem);\n font-weight: 400;\n line-height: 1.5;\n letter-spacing: -0.01em;\n cursor: pointer;\n}\n.nexus-number-input__max:disabled {\n cursor: default;\n}\n.nexus-number-input__max-text {\n color: var(--color-text-tertiary);\n}\n.nexus-number-input__max-value {\n color: var(--color-text-secondary);\n text-decoration: underline;\n}\n.nexus-number-input__max-value--exceeded {\n color: var(--color-status-danger-intense);\n}\n\n/* \u2500\u2500 Container (the bordered input box) \u2500\u2500 */\n.nexus-number-input__container {\n display: flex;\n align-items: center;\n border-radius: var(--radius-corner-md, 0.5rem);\n border: 1px solid var(--color-border-default);\n background: var(--color-surface-default);\n outline: 0.5px solid transparent;\n transition:\n border-color var(--duration-transition-fast, 150ms),\n outline-color var(--duration-transition-fast, 150ms);\n}\n.nexus-number-input--basic .nexus-number-input__container {\n overflow: clip;\n}\n.nexus-number-input:not(.nexus-number-input--disabled):not(\n .nexus-number-input--error\n )\n .nexus-number-input__container:hover {\n border-color: var(--color-border-default-hover);\n outline-color: var(--color-border-default-hover);\n}\n.nexus-number-input:not(.nexus-number-input--disabled):not(\n .nexus-number-input--error\n )\n .nexus-number-input__container:focus-within {\n border-color: var(--color-accent-primary-focus);\n outline-color: var(--color-accent-primary-focus);\n}\n.nexus-number-input--error .nexus-number-input__container {\n border-color: var(--color-status-danger-focus);\n outline-color: var(--color-status-danger-focus);\n}\n.nexus-number-input--disabled .nexus-number-input__container {\n background: var(--color-surface-strong);\n border-color: var(--color-border-medium);\n pointer-events: none;\n}\n.nexus-number-input--disabled .nexus-number-input__label {\n color: var(--color-text-muted);\n}\n.nexus-number-input--disabled .nexus-number-input__max {\n cursor: default;\n}\n.nexus-number-input--disabled .nexus-number-input__max-text,\n.nexus-number-input--disabled .nexus-number-input__max-value {\n color: var(--color-text-muted);\n text-decoration: none;\n}\n.nexus-number-input--disabled .nexus-number-input__step {\n color: var(--color-text-muted);\n}\n.nexus-number-input--disabled .nexus-number-input__bind-btn {\n background: var(--color-surface-strong);\n color: var(--color-text-muted);\n}\n.nexus-number-input--disabled .nexus-number-input__description {\n color: var(--color-text-muted);\n}\n\n/* \u2500\u2500 Input field \u2500\u2500 */\n.nexus-number-input__field {\n flex: 1;\n min-width: 0;\n border: none;\n background: transparent;\n outline: none;\n font-size: var(--text-label-lg, 1rem);\n font-weight: var(--font-weight-label-lg, 500);\n line-height: 1;\n color: var(--color-text-primary);\n}\n.nexus-number-input__field::placeholder {\n color: var(--color-text-muted);\n}\n.nexus-number-input__field:focus-visible {\n outline: none;\n}\n.nexus-number-input--disabled .nexus-number-input__field {\n color: var(--color-text-muted);\n cursor: not-allowed;\n}\n\n/* \u2500\u2500 Size: field padding (basic) \u2500\u2500 */\n.nexus-number-input--basic.nexus-number-input--lg .nexus-number-input__field {\n padding: var(--spacing-padding-sm, 0.75rem);\n}\n.nexus-number-input--basic.nexus-number-input--xl .nexus-number-input__field {\n padding: var(--spacing-padding-md, 1rem);\n}\n\n/* \u2500\u2500 Size: field padding (bind) \u2500\u2500 */\n.nexus-number-input--bind .nexus-number-input__container {\n padding-inline: var(--spacing-padding-xs, 0.5rem);\n}\n.nexus-number-input--bind .nexus-number-input__field {\n text-align: center;\n}\n.nexus-number-input--bind.nexus-number-input--lg .nexus-number-input__field {\n padding: var(--spacing-padding-sm, 0.75rem);\n}\n.nexus-number-input--bind.nexus-number-input--xl .nexus-number-input__field {\n padding: var(--spacing-padding-md, 1rem) var(--spacing-padding-sm, 0.75rem);\n}\n\n/* \u2500\u2500 Basic variant: chevron buttons column \u2500\u2500 */\n.nexus-number-input__buttons {\n display: flex;\n flex-direction: column;\n align-self: stretch;\n border-left: 1px solid var(--color-border-default);\n width: 24px;\n flex-shrink: 0;\n}\n.nexus-number-input__step {\n display: flex;\n flex: 1;\n align-items: center;\n justify-content: center;\n padding: 0;\n margin: 0;\n border: none;\n background: var(--color-surface-subtle);\n cursor: pointer;\n color: var(--color-icon-secondary);\n transition:\n color var(--duration-transition-fast, 150ms),\n background-color var(--duration-transition-fast, 150ms);\n}\n.nexus-number-input__step:hover {\n background: var(--color-surface-subtle-hover);\n color: var(--color-icon-primary);\n}\n.nexus-number-input__step:disabled {\n color: var(--color-text-muted);\n pointer-events: none;\n}\n.nexus-number-input__step--up {\n border-bottom: 1px solid var(--color-border-default);\n}\n.nexus-number-input__chevron-icon {\n width: 8px;\n height: 5px;\n}\n.nexus-number-input__chevron-icon--down {\n transform: scaleY(-1);\n}\n\n/* \u2500\u2500 Bind variant: +/- buttons \u2500\u2500 */\n.nexus-number-input__bind-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n padding: 0;\n margin: 0;\n border: none;\n border-radius: var(--radius-corner-sm, 0.25rem);\n background: var(--color-surface-subtle);\n color: var(--color-icon-secondary);\n cursor: pointer;\n overflow: clip;\n transition:\n color var(--duration-transition-fast, 150ms),\n background-color var(--duration-transition-fast, 150ms);\n}\n.nexus-number-input__bind-btn:hover {\n background: var(--color-surface-subtle-hover);\n color: var(--color-icon-primary);\n}\n.nexus-number-input__bind-btn:disabled {\n color: var(--color-text-muted);\n pointer-events: none;\n}\n.nexus-number-input--xl .nexus-number-input__bind-btn {\n width: 30px;\n height: 30px;\n}\n.nexus-number-input__bind-icon {\n width: 16px;\n height: 16px;\n}\n\n/* \u2500\u2500 Description \u2500\u2500 */\n.nexus-number-input__description {\n margin: 0;\n font-size: var(--text-text-xs, 0.75rem);\n font-weight: 400;\n line-height: 1.5;\n letter-spacing: -0.01em;\n color: var(--color-text-tertiary);\n height: 18px;\n}\n.nexus-number-input__description--error {\n color: var(--color-status-danger-intense);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Divider\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-divider {\n flex-shrink: 0;\n border-color: var(--color-border-default);\n}\n.nexus-divider--horizontal {\n width: 100%;\n border-top-width: 1px;\n}\n.nexus-divider--vertical {\n align-self: stretch;\n border-left-width: 1px;\n}\n.nexus-divider--solid {\n border-style: solid;\n}\n.nexus-divider--dashed {\n border-style: dashed;\n}\n.nexus-divider--dotted {\n border-style: dotted;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Avatar\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-avatar {\n position: relative;\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n background: var(--color-surface-hover);\n color: var(--color-text-tertiary);\n}\n.nexus-avatar--xs {\n width: 1.5rem;\n height: 1.5rem;\n font-size: 10px;\n}\n.nexus-avatar--sm {\n width: 2rem;\n height: 2rem;\n font-size: var(--text-text-xs, 0.75rem);\n}\n.nexus-avatar--md {\n width: 2.5rem;\n height: 2.5rem;\n font-size: var(--text-text-sm, 0.875rem);\n}\n.nexus-avatar--lg {\n width: 3rem;\n height: 3rem;\n font-size: var(--text-text-base, 1rem);\n}\n.nexus-avatar--xl {\n width: 4rem;\n height: 4rem;\n font-size: var(--text-text-lg, 1.125rem);\n}\n.nexus-avatar--circle {\n border-radius: 9999px;\n}\n.nexus-avatar--square {\n border-radius: var(--radius-corner-md, 0.375rem);\n}\n.nexus-avatar__icon--xs {\n width: 1rem;\n height: 1rem;\n}\n.nexus-avatar__icon--sm {\n width: 1.25rem;\n height: 1.25rem;\n}\n.nexus-avatar__icon--md {\n width: 1.5rem;\n height: 1.5rem;\n}\n.nexus-avatar__icon--lg {\n width: 2rem;\n height: 2rem;\n}\n.nexus-avatar__icon--xl {\n width: 2.5rem;\n height: 2.5rem;\n}\n.nexus-avatar__img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Switch\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-switch {\n position: relative;\n display: inline-flex;\n flex-shrink: 0;\n cursor: pointer;\n border-radius: 9999px;\n transition-property: background-color;\n transition-duration: 200ms;\n border: 2px solid transparent;\n}\n.nexus-switch:has(input:disabled) {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.nexus-switch--sm {\n height: 1.25rem;\n width: 2.25rem;\n}\n.nexus-switch--md {\n height: 1.5rem;\n width: 2.75rem;\n}\n.nexus-switch--checked {\n background: var(--color-accent-primary);\n}\n.nexus-switch--unchecked {\n background: var(--color-border-default);\n}\n.nexus-switch__thumb {\n pointer-events: none;\n display: block;\n border-radius: 9999px;\n background: var(--color-static-white);\n box-shadow: var(--shadow-comp-sm);\n transition-property: transform;\n transition-duration: 200ms;\n}\n.nexus-switch__thumb--sm {\n width: 1rem;\n height: 1rem;\n}\n.nexus-switch__thumb--md {\n width: 1.25rem;\n height: 1.25rem;\n}\n.nexus-switch__thumb--sm-on {\n transform: translateX(1rem);\n}\n.nexus-switch__thumb--md-on {\n transform: translateX(1.25rem);\n}\n.nexus-switch__thumb--off {\n transform: translateX(0);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CheckBox\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-checkbox {\n display: inline-flex;\n align-items: center;\n gap: var(--spacing-gap-sm, 0.5rem);\n user-select: none;\n}\n.nexus-checkbox--sm {\n font-size: var(--text-text-xs, 0.75rem);\n}\n.nexus-checkbox--md {\n font-size: var(--text-text-sm, 0.875rem);\n}\n.nexus-checkbox--pointer {\n cursor: pointer;\n}\n.nexus-checkbox--disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.nexus-checkbox__box {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--color-border-default);\n transition-property: border-color, background-color;\n transition-duration: 150ms;\n}\n.nexus-checkbox__box:has(~ .nexus-sr-only:disabled) {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.nexus-checkbox__box--sm {\n width: 1rem;\n height: 1rem;\n}\n.nexus-checkbox__box--md {\n width: 1.25rem;\n height: 1.25rem;\n}\n.nexus-checkbox__box--square {\n border-radius: var(--radius-corner-sm, 0.25rem);\n}\n.nexus-checkbox__box--round {\n border-radius: 9999px;\n}\n.nexus-checkbox__box--checked {\n border-color: var(--color-accent-primary);\n background: var(--color-accent-primary);\n color: var(--color-static-white);\n}\n.nexus-checkbox__box--unchecked {\n border-color: var(--color-border-default);\n background: var(--color-surface-default);\n}\n.nexus-checkbox__icon--sm {\n width: 0.75rem;\n height: 0.75rem;\n}\n.nexus-checkbox__icon--md {\n width: 0.875rem;\n height: 0.875rem;\n}\n.nexus-checkbox__label {\n color: var(--color-text-primary);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n RadioGroup\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-radio-group {\n display: flex;\n}\n.nexus-radio-group--horizontal {\n flex-direction: row;\n gap: var(--spacing-gap-lg, 1rem);\n}\n.nexus-radio-group--vertical {\n flex-direction: column;\n gap: var(--spacing-gap-sm, 0.5rem);\n}\n.nexus-radio-item {\n display: inline-flex;\n align-items: center;\n gap: var(--spacing-gap-sm, 0.5rem);\n user-select: none;\n}\n.nexus-radio-item--sm {\n font-size: var(--text-text-xs, 0.75rem);\n}\n.nexus-radio-item--md {\n font-size: var(--text-text-sm, 0.875rem);\n}\n.nexus-radio-item--pointer {\n cursor: pointer;\n}\n.nexus-radio-item--disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.nexus-radio__circle {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border-radius: 9999px;\n border: 1px solid var(--color-border-default);\n transition-property: border-color;\n transition-duration: 150ms;\n}\n.nexus-radio__circle:has(~ .nexus-sr-only:disabled) {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.nexus-radio__circle--sm {\n width: 1rem;\n height: 1rem;\n}\n.nexus-radio__circle--md {\n width: 1.25rem;\n height: 1.25rem;\n}\n.nexus-radio__circle--checked {\n border-color: var(--color-accent-primary);\n color: var(--color-accent-primary);\n}\n.nexus-radio__circle--unchecked {\n border-color: var(--color-border-default);\n background: var(--color-surface-default);\n}\n.nexus-radio__dot {\n border-radius: 9999px;\n background: currentColor;\n}\n.nexus-radio__dot--sm {\n width: 0.375rem;\n height: 0.375rem;\n}\n.nexus-radio__dot--md {\n width: 0.5rem;\n height: 0.5rem;\n}\n.nexus-radio__label {\n color: var(--color-text-primary);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Chip\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-chip {\n display: inline-flex;\n align-items: center;\n gap: 0.375rem;\n white-space: nowrap;\n font-weight: 500;\n transition-property: color, background-color, border-color;\n transition-duration: 150ms;\n user-select: none;\n border-radius: 9999px;\n border: 1px solid transparent;\n background: transparent;\n cursor: pointer;\n font-family: inherit;\n padding: 0;\n margin: 0;\n text-decoration: none;\n}\n.nexus-chip[aria-disabled='true'] {\n opacity: 0.5;\n pointer-events: none;\n}\n.nexus-chip--default {\n border-color: var(--color-border-default);\n background: var(--color-surface-default);\n color: var(--color-text-primary);\n}\n.nexus-chip--filled {\n border-color: transparent;\n background: var(--color-surface-hover);\n color: var(--color-text-primary);\n}\n.nexus-chip--outline {\n border-color: var(--color-border-default);\n background: transparent;\n color: var(--color-text-primary);\n}\n.nexus-chip--accent {\n border-color: transparent;\n background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent);\n color: var(--color-accent-primary);\n}\n.nexus-chip--sm {\n height: 1.5rem;\n padding-inline: var(--spacing-padding-xs, 0.5rem);\n font-size: var(--text-text-xs, 0.75rem);\n}\n.nexus-chip--md {\n height: 1.75rem;\n padding-inline: 0.625rem;\n font-size: var(--text-text-xs, 0.75rem);\n}\n.nexus-chip--lg {\n height: 2rem;\n padding-inline: var(--spacing-padding-sm, 0.75rem);\n font-size: var(--text-text-sm, 0.875rem);\n}\n.nexus-chip__close {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border-radius: 9999px;\n padding: 0.125rem;\n opacity: 0.6;\n transition-property: opacity;\n transition-duration: 150ms;\n}\n.nexus-chip__close:hover {\n opacity: 1;\n}\n.nexus-chip__close-icon {\n width: 0.75rem;\n height: 0.75rem;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Badge\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-badge-wrapper {\n position: relative;\n}\n.nexus-badge {\n --nexus-badge-offset-x: 0px;\n --nexus-badge-offset-y: 0px;\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 1.25rem;\n height: 1.25rem;\n padding: 0 0.35rem;\n border-radius: var(--radius-corner-full, 9999px);\n font-size: var(--text-text-xs, 0.75rem);\n font-weight: var(--font-weight-label-semibold-sm, 600);\n line-height: 1;\n color: var(--color-text-inverted);\n}\n.nexus-badge--positioned {\n position: absolute;\n top: 0;\n right: 0;\n z-index: 1;\n transform: translate(\n calc(50% + var(--nexus-badge-offset-x)),\n calc(-50% + var(--nexus-badge-offset-y))\n );\n}\n.nexus-badge--dot {\n min-width: 0;\n padding: 0;\n}\n.nexus-badge--dot.nexus-badge--sm {\n width: 0.375rem;\n height: 0.375rem;\n}\n.nexus-badge--dot.nexus-badge--md {\n width: 0.5rem;\n height: 0.5rem;\n}\n.nexus-badge--dot.nexus-badge--lg {\n width: 0.625rem;\n height: 0.625rem;\n}\n.nexus-badge--danger {\n background: var(--color-status-danger);\n color: var(--color-static-white);\n}\n.nexus-badge--primary {\n background: var(--color-accent-primary);\n color: var(--color-accent-on-primary);\n}\n.nexus-badge--secondary {\n background: var(--color-accent-secondary);\n color: var(--color-accent-on-secondary);\n}\n.nexus-badge--info {\n background: var(--color-status-info);\n color: var(--color-static-white);\n}\n.nexus-badge--success {\n background: var(--color-status-success);\n color: var(--color-static-white);\n}\n.nexus-badge--warning {\n background: var(--color-status-warning);\n color: var(--color-static-black);\n}\n.nexus-badge--sm:not(.nexus-badge--dot) {\n min-width: 1rem;\n height: 1rem;\n padding: 0 0.25rem;\n font-size: 0.625rem;\n}\n.nexus-badge--lg:not(.nexus-badge--dot) {\n min-width: 1.5rem;\n height: 1.5rem;\n padding: 0 0.45rem;\n font-size: var(--text-text-sm, 0.875rem);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Progress\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-progress-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-gap-xs, 0.25rem);\n width: 100%;\n}\n.nexus-progress__header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--spacing-gap-sm, 0.5rem);\n}\n.nexus-progress__label {\n font-size: var(--text-text-sm, 0.875rem);\n color: var(--color-text-primary);\n}\n.nexus-progress__value {\n font-size: var(--text-text-sm, 0.875rem);\n color: var(--color-text-secondary);\n font-variant-numeric: tabular-nums;\n}\n.nexus-progress {\n position: relative;\n width: 100%;\n overflow: hidden;\n border-radius: var(--radius-corner-full, 9999px);\n background: var(--color-surface-strong);\n}\n.nexus-progress--sm {\n height: 0.25rem;\n}\n.nexus-progress--md {\n height: 0.375rem;\n}\n.nexus-progress--lg {\n height: 0.5rem;\n}\n.nexus-progress__bar {\n height: 100%;\n border-radius: inherit;\n transition: width var(--duration-transition-normal, 200ms)\n var(--ease-transition-normal, cubic-bezier(0, 0, 0.2, 1));\n}\n.nexus-progress--primary .nexus-progress__bar {\n background: var(--color-accent-primary);\n}\n.nexus-progress--success .nexus-progress__bar {\n background: var(--color-status-success);\n}\n.nexus-progress--warning .nexus-progress__bar {\n background: var(--color-status-warning);\n}\n.nexus-progress--danger .nexus-progress__bar {\n background: var(--color-status-danger);\n}\n.nexus-progress--info .nexus-progress__bar {\n background: var(--color-status-info);\n}\n.nexus-progress__bar--indeterminate {\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 35% !important;\n animation: nexus-progress-indeterminate 1.1s\n var(--ease-transition-normal, cubic-bezier(0, 0, 0.2, 1)) infinite;\n}\n@keyframes nexus-progress-indeterminate {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(calc(100% / 0.35 * 3));\n }\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Alert\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-alert {\n display: flex;\n align-items: flex-start;\n gap: var(--spacing-gap-sm, 0.5rem);\n padding: var(--spacing-padding-md, 1rem);\n border-radius: var(--radius-corner-md, 8px);\n border-width: var(--border-width-stroke-thin, 1px);\n border-style: solid;\n}\n.nexus-alert__icon {\n flex-shrink: 0;\n margin-top: 0.125rem;\n line-height: 0;\n}\n.nexus-alert__icon-svg {\n width: 1.25rem;\n height: 1.25rem;\n}\n.nexus-alert__body {\n flex: 1;\n min-width: 0;\n}\n.nexus-alert__title {\n margin: 0;\n font-weight: var(--font-weight-heading-h7, 600);\n font-size: var(--text-text-sm, 0.875rem);\n color: var(--color-text-primary);\n}\n.nexus-alert__description {\n margin-top: var(--spacing-gap-xs, 0.25rem);\n font-size: var(--text-text-sm, 0.875rem);\n color: var(--color-text-secondary);\n}\n.nexus-alert__action {\n flex-shrink: 0;\n align-self: center;\n}\n.nexus-alert__close {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin: 0;\n padding: var(--spacing-padding-2xs, 0.25rem);\n border: none;\n border-radius: var(--radius-corner-sm, 4px);\n background: transparent;\n cursor: pointer;\n font: inherit;\n color: var(--color-icon-secondary);\n transition: color var(--duration-transition-fast, 150ms)\n var(--ease-transition-fast, ease);\n}\n.nexus-alert__close:hover {\n color: var(--color-icon-primary);\n}\n.nexus-alert__close-icon {\n width: 1rem;\n height: 1rem;\n}\n.nexus-alert--info {\n background: color-mix(\n in srgb,\n var(--color-status-info-dim) 45%,\n var(--color-surface-default)\n );\n border-color: color-mix(\n in srgb,\n var(--color-status-info) 28%,\n var(--color-border-default)\n );\n}\n.nexus-alert--info .nexus-alert__icon {\n color: var(--color-status-info-intense);\n}\n.nexus-alert--success {\n background: color-mix(\n in srgb,\n var(--color-status-success-dim) 45%,\n var(--color-surface-default)\n );\n border-color: color-mix(\n in srgb,\n var(--color-status-success) 28%,\n var(--color-border-default)\n );\n}\n.nexus-alert--success .nexus-alert__icon {\n color: var(--color-status-success-intense);\n}\n.nexus-alert--warning {\n background: color-mix(\n in srgb,\n var(--color-status-warning-dim) 45%,\n var(--color-surface-default)\n );\n border-color: color-mix(\n in srgb,\n var(--color-status-warning) 28%,\n var(--color-border-default)\n );\n}\n.nexus-alert--warning .nexus-alert__icon {\n color: var(--color-status-warning-intense);\n}\n.nexus-alert--danger {\n background: color-mix(\n in srgb,\n var(--color-status-danger-dim) 45%,\n var(--color-surface-default)\n );\n border-color: color-mix(\n in srgb,\n var(--color-status-danger) 28%,\n var(--color-border-default)\n );\n}\n.nexus-alert--danger .nexus-alert__icon {\n color: var(--color-status-danger-intense);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Pagination\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-pagination {\n display: flex;\n align-items: center;\n gap: var(--spacing-gap-xs, 0.25rem);\n}\n.nexus-pagination--sm {\n font-size: var(--text-text-xs, 0.75rem);\n}\n.nexus-pagination--md {\n font-size: var(--text-text-sm, 0.875rem);\n}\n.nexus-page-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--radius-corner-md, 0.375rem);\n font-weight: 500;\n transition-property: color, background-color;\n transition-duration: 150ms;\n user-select: none;\n border: 1px solid transparent;\n background: transparent;\n cursor: pointer;\n font-family: inherit;\n padding: 0;\n margin: 0;\n}\n.nexus-page-btn:disabled {\n opacity: 0.4;\n pointer-events: none;\n}\n.nexus-page-btn--sm {\n width: 1.75rem;\n height: 1.75rem;\n font-size: var(--text-text-xs, 0.75rem);\n}\n.nexus-page-btn--md {\n width: 2.25rem;\n height: 2.25rem;\n font-size: var(--text-text-sm, 0.875rem);\n}\n.nexus-page-btn--active {\n background: var(--color-accent-primary);\n color: var(--color-static-white);\n border-color: var(--color-accent-primary);\n}\n.nexus-page-btn--inactive {\n color: var(--color-text-primary);\n}\n.nexus-page-btn--inactive:hover {\n background: var(--color-surface-hover);\n}\n.nexus-page-icon--sm {\n width: 0.875rem;\n height: 0.875rem;\n}\n.nexus-page-icon--md {\n width: 1rem;\n height: 1rem;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Tab\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-tab-list {\n position: relative;\n display: flex;\n border-bottom: 1px solid var(--color-border-default);\n}\n.nexus-tab-list--pill {\n gap: var(--spacing-gap-xs, 0.25rem);\n border-bottom: none;\n background: var(--color-surface-hover);\n border-radius: var(--radius-corner-lg, 0.5rem);\n padding: 0.25rem;\n}\n.nexus-tab-trigger {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n white-space: nowrap;\n font-weight: 500;\n user-select: none;\n outline: none;\n transition-property: color, background-color, border-color;\n transition-duration: 150ms;\n border: none;\n background: transparent;\n cursor: pointer;\n font-family: inherit;\n padding: 0;\n margin: 0;\n}\n.nexus-tab-trigger--line {\n padding: 0.625rem var(--spacing-padding-md, 1rem);\n color: var(--color-text-tertiary);\n border-bottom: 2px solid transparent;\n margin-bottom: -1px;\n}\n.nexus-tab-trigger--line:hover {\n color: var(--color-text-primary);\n}\n.nexus-tab-trigger--line-active {\n color: var(--color-text-primary);\n border-bottom-color: var(--color-accent-primary);\n}\n.nexus-tab-trigger--pill {\n padding: 0.375rem var(--spacing-padding-sm, 0.75rem);\n border-radius: var(--radius-corner-md, 0.375rem);\n color: var(--color-text-tertiary);\n}\n.nexus-tab-trigger--pill:hover {\n color: var(--color-text-primary);\n}\n.nexus-tab-trigger--pill-active {\n color: var(--color-text-primary);\n background: var(--color-surface-default);\n box-shadow: var(--shadow-comp-sm);\n}\n.nexus-tab-trigger--sm {\n font-size: var(--text-text-xs, 0.75rem);\n}\n.nexus-tab-trigger--md {\n font-size: var(--text-text-sm, 0.875rem);\n}\n.nexus-tab-trigger--disabled {\n opacity: 0.4;\n pointer-events: none;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Skeleton\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-skeleton {\n position: relative;\n overflow: hidden;\n background: linear-gradient(\n to right,\n var(--color-surface-hover),\n var(--color-surface-default),\n var(--color-surface-hover)\n );\n background-size: 300% 100%;\n animation: nexus-skeleton-shimmer 2.5s ease-in-out infinite;\n}\n.nexus-skeleton--rect {\n border-radius: var(--radius-corner-md, 0.375rem);\n}\n.nexus-skeleton--circle {\n border-radius: 9999px;\n}\n.nexus-skeleton__children {\n opacity: 0;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Spinner\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-spinner {\n animation: nexus-spin 1s linear infinite;\n color: currentColor;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n ErrorBoundary\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-error-boundary {\n padding: 1rem;\n border-radius: var(--radius-corner-lg, 0.5rem);\n border: 1px solid var(--color-comp-error-border);\n background: var(--color-comp-error-bg);\n color: var(--color-comp-error-text);\n font-size: var(--text-text-sm, 0.875rem);\n}\n.nexus-error-boundary__title {\n margin: 0;\n font-weight: 600;\n}\n.nexus-error-boundary__message {\n margin: 0.5rem 0 0;\n opacity: 0.8;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Divider & Simple components\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-virtual-scroll {\n overflow: auto;\n}\n.nexus-modal-portal-target {\n position: absolute;\n z-index: 9999;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n DataList\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-datalist-center {\n display: flex;\n align-items: center;\n justify-content: center;\n padding-block: var(--spacing-padding-xl, 2rem);\n}\n.nexus-datalist-empty {\n display: flex;\n align-items: center;\n justify-content: center;\n padding-block: var(--spacing-padding-xl, 2rem);\n font-size: var(--text-text-sm, 0.875rem);\n color: var(--color-text-tertiary);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n InfiniteScroll\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-infinite-scroll {\n position: relative;\n}\n.nexus-infinite-sentinel {\n position: relative;\n height: 1px;\n width: 100%;\n}\n.nexus-infinite-spinner {\n display: flex;\n align-items: center;\n justify-content: center;\n padding-block: var(--spacing-padding-md, 1rem);\n}\n.nexus-infinite-spinner-icon {\n width: 1.5rem;\n height: 1.5rem;\n animation: nexus-spin 1s linear infinite;\n border-radius: 9999px;\n border: 2px solid var(--color-border-default);\n border-top-color: var(--color-accent-primary);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Countdown\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-countdown {\n display: inline-flex;\n align-items: center;\n gap: var(--spacing-gap-xs, 0.25rem);\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n font-variant-numeric: tabular-nums;\n}\n.nexus-countdown__separator {\n color: var(--color-text-tertiary);\n margin-inline: 0.125rem;\n}\n.nexus-countdown__label {\n color: var(--color-text-tertiary);\n font-size: var(--text-text-xs, 0.75rem);\n margin-left: 0.125rem;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Select\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-select-trigger {\n position: relative;\n display: flex;\n height: 2.5rem;\n align-items: center;\n justify-content: space-between;\n border-radius: var(--radius-corner-sm, 0.25rem);\n border: 1px solid var(--color-border-default);\n background: var(--color-surface-default, transparent);\n color: var(--color-text-primary);\n font-size: var(--text-text-sm, 0.875rem);\n font-family: inherit;\n cursor: pointer;\n padding: 0;\n margin: 0;\n transition-property: border-color;\n transition-duration: 200ms;\n}\n.nexus-select-trigger:hover {\n border-color: var(--color-border-default-hover);\n box-shadow: 0 0 0 0.5px var(--color-border-default-hover);\n}\n.nexus-select-trigger--open,\n.nexus-select-trigger:focus-within {\n outline: none;\n border-color: var(--color-accent-primary);\n box-shadow: 0 0 0 0.5px var(--color-accent-primary);\n}\n.nexus-select-trigger:has(:disabled) {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.nexus-select-trigger::placeholder {\n color: var(--color-text-tertiary);\n}\n.nexus-select-trigger--default {\n background: var(--color-surface-hover);\n}\n.nexus-select-trigger--outline {\n background: var(--color-surface-default);\n}\n.nexus-select-trigger--sm {\n width: 4rem;\n}\n.nexus-select-trigger--md {\n width: 8rem;\n}\n.nexus-select-trigger--lg {\n width: 12rem;\n}\n.nexus-select-trigger--full {\n width: 100%;\n}\n.nexus-select-trigger--justify-end {\n justify-content: flex-end;\n}\n.nexus-select-trigger__display {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n height: 100%;\n width: calc(100% - 30px);\n align-items: center;\n}\n.nexus-select-trigger__inner {\n display: flex;\n height: 100%;\n width: 100%;\n flex-direction: row-reverse;\n align-items: center;\n justify-content: space-between;\n border-radius: var(--radius-corner-sm, 0.25rem);\n padding: var(--spacing-padding-xs, 0.5rem) var(--spacing-padding-sm, 0.75rem);\n}\n.nexus-select-trigger__inner:focus {\n outline: none;\n}\n.nexus-select-chevron {\n width: 0.75rem;\n height: 0.75rem;\n opacity: 0.5;\n transition: transform 200ms;\n}\n.nexus-select-chevron--open {\n transform: rotate(180deg);\n}\n\n.nexus-select-content {\n position: relative;\n z-index: 50;\n max-height: 24rem;\n overflow: hidden;\n border-radius: var(--radius-corner-sm, 0.25rem);\n border: 1px solid var(--color-border-default);\n background: var(--color-surface-default);\n box-shadow: var(--shadow-comp-lg);\n transform-origin: top center;\n will-change: transform, opacity;\n}\n.nexus-select-content[data-state='open'] {\n animation: nexus-select-slide-in 150ms ease-out;\n}\n.nexus-select-content[data-state='closed'] {\n animation: nexus-select-slide-out 100ms ease-in forwards;\n}\n@keyframes nexus-select-slide-in {\n from {\n opacity: 0;\n transform: translateY(-4px) scaleY(0.96);\n }\n to {\n opacity: 1;\n transform: translateY(0) scaleY(1);\n }\n}\n@keyframes nexus-select-slide-out {\n from {\n opacity: 1;\n transform: translateY(0) scaleY(1);\n }\n to {\n opacity: 0;\n transform: translateY(-4px) scaleY(0.96);\n }\n}\n.nexus-select-content--sm {\n width: 4rem;\n}\n.nexus-select-content--md {\n width: 8rem;\n}\n.nexus-select-content--lg {\n width: 12rem;\n}\n.nexus-select-content--full {\n width: var(--radix-popper-anchor-width);\n}\n.nexus-select-viewport {\n padding: 0.25rem;\n}\n\n.nexus-select-item {\n position: relative;\n display: flex;\n width: 100%;\n cursor: pointer;\n align-items: center;\n border-radius: var(--radius-corner-sm, 0.25rem);\n padding: var(--spacing-padding-xs, 0.5rem) var(--spacing-padding-sm, 0.75rem);\n color: var(--color-text-primary);\n font-size: var(--text-text-sm, 0.875rem);\n transition-property: background-color;\n transition-duration: 150ms;\n outline: none;\n user-select: none;\n}\n.nexus-select-item:hover,\n.nexus-select-item:focus,\n.nexus-select-item[data-highlighted] {\n background: var(--color-surface-hover);\n}\n.nexus-select-item[data-disabled] {\n pointer-events: none;\n opacity: 0.5;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n DropdownMenu\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-dropdown-content {\n position: relative;\n z-index: var(--z-index-layer-dropdown, 10);\n min-width: 10rem;\n overflow: hidden;\n border-radius: var(--radius-corner-md, 0.5rem);\n border: 1px solid var(--color-border-default);\n background: var(--color-surface-default);\n padding: var(--spacing-padding-xs, 0.5rem);\n box-shadow: var(--shadow-comp-lg);\n color: var(--color-text-primary);\n transform-origin: var(--radix-dropdown-menu-content-transform-origin);\n will-change: transform, opacity;\n}\n.nexus-dropdown-content[data-state='open'] {\n animation: nexus-dropdown-in 150ms ease-out;\n}\n.nexus-dropdown-content[data-state='closed'] {\n animation: nexus-dropdown-out 100ms ease-in forwards;\n}\n@keyframes nexus-dropdown-in {\n from {\n opacity: 0;\n transform: scale(0.96);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n@keyframes nexus-dropdown-out {\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0;\n transform: scale(0.96);\n }\n}\n.nexus-dropdown-separator {\n margin: var(--spacing-padding-xs, 0.5rem)\n calc(-1 * var(--spacing-padding-xs, 0.5rem));\n height: 1px;\n background: var(--color-border-default);\n}\n.nexus-dropdown-item {\n position: relative;\n display: flex;\n width: 100%;\n cursor: default;\n align-items: center;\n gap: var(--spacing-gap-sm, 0.5rem);\n border-radius: var(--radius-corner-sm, 0.25rem);\n padding: var(--spacing-padding-xs, 0.5rem) var(--spacing-padding-sm, 0.75rem);\n font-size: var(--text-text-sm, 0.875rem);\n color: var(--color-text-primary);\n outline: none;\n user-select: none;\n transition: background-color 150ms ease;\n}\n.nexus-dropdown-item[data-highlighted] {\n background: var(--color-surface-hover);\n}\n.nexus-dropdown-item[data-disabled] {\n pointer-events: none;\n opacity: var(--opacity-disabled-element, 0.4);\n}\n.nexus-dropdown-item--danger {\n color: var(--color-status-danger);\n}\n.nexus-dropdown-item--danger[data-highlighted] {\n background: var(--color-status-danger-dim);\n color: var(--color-status-danger-intense);\n}\n.nexus-dropdown-item__icon {\n display: inline-flex;\n flex-shrink: 0;\n color: var(--color-icon-secondary);\n}\n.nexus-dropdown-item--danger .nexus-dropdown-item__icon {\n color: var(--color-status-danger);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n ToggleGroup\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-toggle-group {\n display: inline-flex;\n align-items: stretch;\n position: relative;\n border-radius: var(--radius-corner-md, 0.5rem);\n}\n.nexus-toggle-group--default {\n background: var(--color-surface-subtle);\n padding: var(--spacing-padding-2xs, 0.25rem);\n gap: var(--spacing-gap-xs, 0.25rem);\n}\n\n/* \u2500\u2500 Sliding indicator \u2500\u2500 */\n.nexus-toggle-group__indicator {\n position: absolute;\n top: 0;\n left: 0;\n border-radius: var(--radius-corner-sm, 0.25rem);\n background: var(--color-surface-default);\n box-shadow: var(--shadow-sm);\n pointer-events: none;\n z-index: 0;\n will-change: transform, width;\n}\n.nexus-toggle-group__indicator--animated {\n transition:\n transform 200ms cubic-bezier(0, 0, 0.2, 1),\n width 200ms cubic-bezier(0, 0, 0.2, 1);\n}\n.nexus-toggle-group--outline {\n border: 1px solid var(--color-border-default);\n padding: var(--spacing-padding-2xs, 0.25rem);\n gap: 0;\n}\n.nexus-toggle-group__item {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--spacing-gap-xs, 0.25rem);\n border-radius: var(--radius-corner-sm, 0.25rem);\n border: none;\n background: transparent;\n font-size: var(--text-text-sm, 0.875rem);\n font-weight: var(--font-weight-text-medium-sm, 500);\n color: var(--color-text-secondary);\n cursor: pointer;\n transition: color var(--duration-transition-normal, 200ms)\n var(--ease-transition-fast);\n outline: none;\n position: relative;\n z-index: 1;\n}\n.nexus-toggle-group__item:focus-visible {\n box-shadow:\n 0 0 0 2px var(--color-surface-default),\n 0 0 0 4px var(--color-accent-primary-focus);\n}\n.nexus-toggle-group__item[data-disabled] {\n pointer-events: none;\n opacity: var(--opacity-disabled-element, 0.4);\n}\n.nexus-toggle-group--default .nexus-toggle-group__item[data-state='on'] {\n color: var(--color-text-primary);\n}\n.nexus-toggle-group--outline .nexus-toggle-group__item {\n padding-inline: var(--spacing-padding-sm, 0.75rem);\n}\n.nexus-toggle-group--outline .nexus-toggle-group__item[data-state='on'] {\n background: var(--color-accent-primary-dim);\n color: var(--color-accent-primary-intense);\n}\n.nexus-toggle-group--outline\n .nexus-toggle-group__item:not([data-state='on']):hover {\n background: var(--color-surface-hover);\n color: var(--color-text-primary);\n}\n.nexus-toggle-group--sm .nexus-toggle-group__item {\n min-height: var(--size-control-sm, 2rem);\n padding-inline: var(--spacing-padding-sm, 0.75rem);\n}\n.nexus-toggle-group--md .nexus-toggle-group__item {\n min-height: var(--size-control-md, 2.5rem);\n padding-inline: var(--spacing-padding-md, 1rem);\n}\n.nexus-toggle-group--lg .nexus-toggle-group__item {\n min-height: var(--size-control-lg, 3rem);\n padding-inline: var(--spacing-padding-lg, 1.5rem);\n}\n.nexus-toggle-group__icon {\n display: inline-flex;\n flex-shrink: 0;\n color: var(--color-icon-secondary);\n}\n.nexus-toggle-group__item[data-state='on'] .nexus-toggle-group__icon {\n color: var(--color-icon-primary);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Slider\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-slider-wrapper {\n display: flex;\n width: 100%;\n flex-direction: column;\n gap: var(--spacing-gap-sm, 0.5rem);\n}\n.nexus-slider__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--spacing-gap-md, 1rem);\n}\n.nexus-slider__label {\n font-size: var(--text-label-md, 0.875rem);\n font-weight: var(--font-weight-label-md, 500);\n color: var(--color-text-primary);\n}\n.nexus-slider__value {\n font-size: var(--text-text-sm, 0.875rem);\n font-variant-numeric: tabular-nums;\n color: var(--color-text-secondary);\n}\n.nexus-slider {\n position: relative;\n display: flex;\n width: 100%;\n touch-action: none;\n user-select: none;\n align-items: center;\n}\n.nexus-slider[data-disabled] {\n opacity: var(--opacity-disabled-element, 0.4);\n pointer-events: none;\n}\n.nexus-slider__track {\n position: relative;\n flex-grow: 1;\n overflow: hidden;\n border-radius: var(--radius-corner-full, 9999px);\n background: var(--color-surface-strong);\n}\n.nexus-slider__range {\n position: absolute;\n height: 100%;\n border-radius: var(--radius-corner-full, 9999px);\n background: var(--color-accent-primary);\n}\n.nexus-slider__thumb {\n display: block;\n flex-shrink: 0;\n border-radius: var(--radius-corner-full, 9999px);\n border: 2px solid var(--color-accent-primary);\n background: var(--color-surface-default);\n box-shadow: var(--shadow-sm);\n outline: none;\n transition:\n box-shadow 150ms ease,\n transform 150ms ease;\n}\n.nexus-slider__thumb:hover {\n box-shadow: var(--shadow-md);\n}\n.nexus-slider__thumb:focus-visible {\n box-shadow:\n 0 0 0 2px var(--color-surface-default),\n 0 0 0 4px var(--color-accent-primary-focus);\n}\n.nexus-slider--sm .nexus-slider__track {\n height: 0.25rem;\n}\n.nexus-slider--sm .nexus-slider__thumb {\n width: 0.875rem;\n height: 0.875rem;\n}\n.nexus-slider--md .nexus-slider__track {\n height: 0.375rem;\n}\n.nexus-slider--md .nexus-slider__thumb {\n width: 1.125rem;\n height: 1.125rem;\n}\n.nexus-slider--lg .nexus-slider__track {\n height: 0.5rem;\n}\n.nexus-slider--lg .nexus-slider__thumb {\n width: 1.25rem;\n height: 1.25rem;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Tooltip\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-tooltip-content {\n z-index: 50;\n display: flex;\n overflow: hidden;\n border-radius: var(--radius-corner-md, 0.375rem);\n padding: var(--spacing-padding-xs, 0.5rem) var(--spacing-padding-sm, 0.75rem);\n font-size: var(--text-text-sm, 0.875rem);\n}\n.nexus-tooltip--light {\n border: 1px solid var(--color-border-default);\n background: var(--color-static-white);\n color: var(--color-static-black);\n box-shadow: var(--shadow-comp-md);\n}\n.nexus-tooltip--dark {\n border: none;\n background: var(--color-static-black);\n color: var(--color-static-white);\n}\n.nexus-tooltip-arrow--dark {\n fill: var(--color-static-black);\n}\n.nexus-tooltip-arrow--light {\n fill: var(--color-static-white);\n}\n.nexus-tooltip-trigger {\n cursor: default;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Popover\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-popover-content {\n z-index: 50;\n border-radius: var(--radius-corner-lg, 0.5rem);\n border: 1px solid var(--color-border-default);\n padding: var(--spacing-padding-md, 1rem);\n box-shadow: var(--shadow-comp-lg);\n outline: none;\n background: var(--color-surface-default);\n color: var(--color-text-primary);\n transform-origin: var(--radix-popover-content-transform-origin);\n will-change: transform, opacity;\n}\n.nexus-popover-content[data-state='open'] {\n animation: nexus-popover-in 150ms ease-out;\n}\n.nexus-popover-content[data-state='closed'] {\n animation: nexus-popover-out 100ms ease-in forwards;\n}\n@keyframes nexus-popover-in {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n@keyframes nexus-popover-out {\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0;\n transform: scale(0.95);\n }\n}\n.nexus-popover-arrow {\n fill: var(--color-surface-default);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Drawer\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-drawer-overlay {\n position: fixed;\n inset: 0;\n z-index: 50;\n background: var(--color-comp-overlay);\n}\n.nexus-drawer-overlay--blur-sm {\n backdrop-filter: blur(4px);\n}\n.nexus-drawer-overlay--blur-md {\n backdrop-filter: blur(12px);\n}\n.nexus-drawer-content {\n position: fixed;\n z-index: 50;\n display: flex;\n flex-direction: column;\n background: var(--color-surface-default);\n}\n.nexus-drawer-content--bottom {\n inset-inline: 0;\n bottom: 0;\n margin-top: 6rem;\n border-top-left-radius: 1rem;\n border-top-right-radius: 1rem;\n border-top: 1px solid var(--color-border-default);\n}\n.nexus-drawer-content--top {\n inset-inline: 0;\n top: 0;\n margin-bottom: 6rem;\n border-bottom-left-radius: 1rem;\n border-bottom-right-radius: 1rem;\n border-bottom: 1px solid var(--color-border-default);\n}\n.nexus-drawer-content--left {\n inset-block: 0;\n left: 0;\n margin-right: 6rem;\n width: 85vw;\n max-width: 24rem;\n border-top-right-radius: 1rem;\n border-bottom-right-radius: 1rem;\n border-right: 1px solid var(--color-border-default);\n}\n.nexus-drawer-content--right {\n inset-block: 0;\n right: 0;\n margin-left: 6rem;\n width: 85vw;\n max-width: 24rem;\n border-top-left-radius: 1rem;\n border-bottom-left-radius: 1rem;\n border-left: 1px solid var(--color-border-default);\n}\n.nexus-drawer-handle {\n display: flex;\n justify-content: center;\n}\n.nexus-drawer-handle--bottom {\n padding-top: var(--spacing-padding-md, 1rem);\n}\n.nexus-drawer-handle--top {\n padding-bottom: var(--spacing-padding-md, 1rem);\n}\n.nexus-drawer-handle__bar {\n background: var(--color-border-strong);\n height: 0.375rem;\n width: 3rem;\n border-radius: 9999px;\n}\n.nexus-drawer-title {\n font-size: var(--text-text-lg, 1.125rem);\n font-weight: 600;\n color: var(--color-text-primary);\n}\n.nexus-drawer-description {\n font-size: var(--text-text-sm, 0.875rem);\n color: var(--color-text-secondary);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Accordion\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-accordion-item {\n border-bottom: 1px solid var(--color-border-default);\n}\n.nexus-accordion-header {\n display: flex;\n}\n.nexus-accordion-trigger {\n display: flex;\n flex: 1;\n align-items: center;\n justify-content: space-between;\n padding: 0;\n padding-block: var(--spacing-padding-md, 1rem);\n margin: 0;\n border: none;\n background: transparent;\n cursor: pointer;\n font: inherit;\n color: inherit;\n text-align: left;\n transition: all 150ms;\n}\n.nexus-accordion-trigger[data-state='open'] > .nexus-accordion-chevron {\n transform: rotate(180deg);\n}\n.nexus-accordion-chevron {\n width: 0.75rem;\n height: 0.75rem;\n flex-shrink: 0;\n transition: transform 200ms;\n}\n.nexus-accordion-content {\n overflow: hidden;\n transition: all 200ms;\n}\n.nexus-accordion-content[data-state='open'] {\n animation: nexus-accordion-down 200ms ease-out;\n}\n.nexus-accordion-content[data-state='closed'] {\n animation: nexus-accordion-up 200ms ease-in;\n}\n.nexus-accordion-content__inner {\n padding-top: 0;\n padding-bottom: var(--spacing-padding-md, 1rem);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Ellipsis\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-ellipsis {\n position: relative;\n}\n.nexus-ellipsis__content {\n overflow: hidden;\n transition: height 300ms;\n}\n.nexus-ellipsis__trigger {\n margin-top: 0.25rem;\n display: flex;\n align-items: center;\n gap: var(--spacing-gap-xs, 0.25rem);\n font-size: var(--text-text-sm, 0.875rem);\n color: var(--color-text-secondary);\n transition-property: color;\n transition-duration: 150ms;\n}\n.nexus-ellipsis__trigger:hover {\n color: var(--color-text-primary);\n}\n.nexus-ellipsis__trigger--expanded > svg {\n transform: rotate(180deg);\n}\n.nexus-ellipsis__chevron {\n width: 0.875rem;\n height: 0.875rem;\n transition: transform 200ms;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Marquee\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-marquee {\n overflow: hidden;\n}\n.nexus-marquee--pause-on-hover:hover > div {\n animation-play-state: paused !important;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Carousel\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-carousel {\n position: relative;\n}\n.nexus-carousel__viewport {\n overflow: hidden;\n}\n.nexus-carousel__container {\n display: flex;\n}\n.nexus-carousel-slide {\n min-width: 0;\n flex-shrink: 0;\n flex-grow: 0;\n flex-basis: 100%;\n}\n.nexus-carousel-btn {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 10;\n width: 2rem;\n height: 2rem;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 9999px;\n background: var(--color-surface-default);\n border: 1px solid var(--color-border-default);\n box-shadow: var(--shadow-comp-sm);\n color: var(--color-text-primary);\n cursor: pointer;\n font: inherit;\n padding: 0;\n margin: 0;\n transition-property: background-color;\n transition-duration: 150ms;\n}\n.nexus-carousel-btn:hover {\n background: var(--color-surface-hover);\n}\n.nexus-carousel-btn:disabled {\n opacity: 0.4;\n pointer-events: none;\n}\n.nexus-carousel-btn--prev {\n left: 0.5rem;\n}\n.nexus-carousel-btn--next {\n right: 0.5rem;\n}\n.nexus-carousel-btn__icon {\n width: 1rem;\n height: 1rem;\n}\n.nexus-carousel-dots {\n display: flex;\n justify-content: center;\n gap: 0.375rem;\n margin-top: var(--spacing-padding-sm, 0.75rem);\n}\n.nexus-carousel-dot {\n width: 0.5rem;\n height: 0.5rem;\n border-radius: 9999px;\n border: none;\n padding: 0;\n cursor: pointer;\n transition-property: background-color;\n transition-duration: 150ms;\n}\n.nexus-carousel-dot--active {\n background: var(--color-accent-primary);\n}\n.nexus-carousel-dot--inactive {\n background: var(--color-border-default);\n}\n.nexus-carousel-dot--inactive:hover {\n background: var(--color-text-tertiary);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Toast\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-toast {\n display: flex;\n align-items: center;\n gap: var(--spacing-gap-sm, 0.75rem);\n border-radius: var(--radius-corner-lg, 0.5rem);\n border: 1px solid var(--color-border-default);\n padding: var(--spacing-padding-sm, 0.75rem) var(--spacing-padding-md, 1rem);\n box-shadow: var(--shadow-comp-lg);\n background: var(--color-surface-default);\n color: var(--color-text-primary);\n}\n.nexus-toast__title {\n font-size: var(--text-text-sm, 0.875rem);\n font-weight: 500;\n}\n.nexus-toast__desc {\n font-size: var(--text-text-xs, 0.75rem);\n color: var(--color-text-secondary);\n}\n.nexus-toast--success {\n border-color: color-mix(\n in srgb,\n var(--color-status-positive) 30%,\n transparent\n );\n background: color-mix(in srgb, var(--color-status-positive) 10%, transparent);\n color: var(--color-status-positive);\n}\n.nexus-toast--error {\n border-color: color-mix(in srgb, var(--color-status-danger) 30%, transparent);\n background: color-mix(in srgb, var(--color-status-danger) 10%, transparent);\n color: var(--color-status-danger);\n}\n.nexus-toast--warning {\n border-color: color-mix(\n in srgb,\n var(--color-status-caution) 30%,\n transparent\n );\n background: color-mix(in srgb, var(--color-status-caution) 10%, transparent);\n color: var(--color-status-caution);\n}\n.nexus-toast--info {\n border-color: color-mix(\n in srgb,\n var(--color-accent-primary) 30%,\n transparent\n );\n background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent);\n color: var(--color-accent-primary);\n}\n.nexus-toast__action-btn {\n background: var(--color-accent-primary);\n color: var(--color-accent-on-primary);\n border-radius: var(--radius-corner-sm, 0.25rem);\n padding: 0.375rem var(--spacing-padding-sm, 0.75rem);\n font-size: var(--text-text-xs, 0.75rem);\n font-weight: 500;\n}\n.nexus-toast__cancel-btn {\n background: var(--color-surface-hover);\n color: var(--color-text-secondary);\n border-radius: var(--radius-corner-sm, 0.25rem);\n padding: 0.375rem var(--spacing-padding-sm, 0.75rem);\n font-size: var(--text-text-xs, 0.75rem);\n font-weight: 500;\n}\n.nexus-toast__close-btn {\n color: var(--color-text-tertiary);\n}\n.nexus-toast__close-btn:hover {\n color: var(--color-text-primary);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Table\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-table-wrap {\n overflow-x: auto;\n}\n.nexus-table {\n width: 100%;\n}\n.nexus-table-thead {\n display: flex;\n background: var(--color-surface-default);\n}\n.nexus-table-th {\n display: flex;\n}\n.nexus-table-th--sortable {\n cursor: pointer;\n}\n.nexus-table-th__sort-btn {\n display: inline-flex;\n align-items: center;\n gap: var(--spacing-gap-xs, 0.25rem);\n background: none;\n border: none;\n padding: 0;\n margin: 0;\n font: inherit;\n color: inherit;\n cursor: pointer;\n text-align: inherit;\n width: 100%;\n}\n.nexus-table-sort-icon {\n width: 1rem;\n height: 1rem;\n}\n.nexus-table-center {\n display: flex;\n align-items: center;\n justify-content: center;\n padding-block: 3rem;\n}\n.nexus-table-nodata {\n color: var(--color-text-tertiary);\n}\n.nexus-table-loading-icon {\n width: 2rem;\n height: 2rem;\n animation: nexus-spin 1s linear infinite;\n border-radius: 9999px;\n border: 2px solid var(--color-border-default);\n border-top-color: var(--color-accent-primary);\n}\n.nexus-table-skeleton-row {\n display: flex;\n cursor: default;\n}\n.nexus-table-skeleton-td {\n height: 100%;\n width: 100%;\n padding-block: var(--spacing-padding-md, 1rem);\n}\n.nexus-table-skeleton-bar {\n height: 1rem;\n width: 100%;\n}\n\n/* TableRow */\n.nexus-table-row {\n border-bottom: 1px solid var(--color-border-default);\n display: flex;\n min-width: 0;\n}\n.nexus-table-row::-webkit-scrollbar {\n display: none;\n}\n.nexus-table-row--default:hover {\n background: var(--color-surface-hover);\n}\n.nexus-table-row--accent:hover {\n background: color-mix(in srgb, var(--color-accent-primary) 5%, transparent);\n}\n\n/* TdColumn */\n.nexus-td {\n min-width: 0;\n width: 100%;\n}\n.nexus-td__inner {\n border-radius: var(--radius-corner-md, 0.375rem);\n transition-property: background-color;\n transition-duration: 150ms;\n}\n.nexus-td__inner--flex {\n display: flex;\n}\n.nexus-td__inner--highlight {\n background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent);\n outline: 1px dashed var(--color-accent-primary);\n outline-offset: -1px;\n}\n.nexus-td--nowrap {\n white-space: nowrap;\n}\n.nexus-td--truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.nexus-td--wrap {\n white-space: normal;\n overflow-wrap: break-word;\n}\n.nexus-td--break-all {\n white-space: normal;\n word-break: break-all;\n}\n.nexus-td--center {\n text-align: center;\n justify-content: center;\n}\n.nexus-td--left {\n text-align: left;\n justify-content: flex-start;\n}\n.nexus-td--right {\n text-align: right;\n justify-content: flex-end;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Modal\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-modal-wrap {\n pointer-events: none;\n position: fixed;\n inset: 0;\n z-index: 99999;\n display: flex;\n height: 100%;\n align-items: center;\n justify-content: center;\n color: var(--color-text-primary);\n}\n.nexus-modal-wrap--bottom-sheet {\n align-items: flex-end;\n}\n.nexus-modal-wrap--slide-left {\n height: 100%;\n justify-content: flex-start;\n}\n.nexus-modal-wrap--slide-right {\n height: 100%;\n justify-content: flex-end;\n}\n.nexus-modal-wrap--full-page,\n.nexus-modal-wrap--full-page-reverse {\n height: 100%;\n justify-content: flex-start;\n}\n\n.nexus-modal-inner {\n position: relative;\n z-index: 2;\n overflow: hidden;\n pointer-events: auto;\n border-radius: var(--radius-corner-lg, 12px);\n border: 1px solid var(--color-border-default);\n background: var(--color-surface-default);\n color: var(--color-text-primary);\n}\n:where(.nexus-modal-inner) {\n width: 100%;\n min-height: 200px;\n}\n.nexus-modal-inner > div {\n display: contents;\n}\n@media (min-width: 640px) {\n :where(.nexus-modal-inner) {\n width: 480px;\n min-height: auto;\n }\n}\n.nexus-modal-inner--bottom-sheet {\n margin: 0;\n width: 100%;\n border-top-left-radius: 1rem;\n border-top-right-radius: 1rem;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n border-top: 1px solid var(--color-border-default);\n padding: 1.5rem 1rem 0;\n}\n.nexus-modal-inner--slide-left,\n.nexus-modal-inner--slide-right {\n height: 100%;\n border-radius: 0;\n}\n.nexus-modal-inner--full-page,\n.nexus-modal-inner--full-page-reverse {\n height: 100%;\n width: 100%;\n border-radius: 0;\n border-color: transparent;\n}\n@media (min-width: 640px) {\n .nexus-modal-inner--full-page,\n .nexus-modal-inner--full-page-reverse {\n width: 100%;\n }\n}\n.nexus-modal-inner--draggable {\n min-width: 320px;\n overflow: visible;\n}\n.nexus-modal-inner--has-footer {\n padding-bottom: 88px;\n}\n.nexus-modal-inner--bottom-sheet.nexus-modal-inner--has-footer {\n padding-bottom: 5rem;\n}\n\n.nexus-modal-header {\n position: relative;\n padding: 1.5rem 1.25rem 0;\n}\n.nexus-modal-header--bottom-sheet {\n padding: 0;\n}\n.nexus-modal-header--draggable {\n cursor: grab;\n user-select: none;\n}\n.nexus-modal-header--draggable:active {\n cursor: grabbing;\n}\n\n.nexus-modal-close-btn {\n position: absolute;\n top: 1.5rem;\n right: 1.25rem;\n z-index: 1;\n margin-left: auto;\n display: flex;\n cursor: pointer;\n align-items: center;\n justify-content: flex-end;\n border: none;\n background: transparent;\n padding: 0;\n}\n.nexus-modal-close-btn--bottom-sheet {\n position: relative;\n top: 0;\n right: 0;\n}\n.nexus-modal-close-icon {\n width: 1.25rem;\n height: 1.25rem;\n color: var(--color-text-muted);\n}\n\n.nexus-modal-title {\n margin: 0;\n padding-right: 42px;\n font-size: var(--text-text-lg, 1.125rem);\n font-weight: 600;\n line-height: 26px;\n letter-spacing: -0.002em;\n color: var(--color-text-primary);\n}\n.nexus-modal-title--bottom-sheet {\n padding-top: 0.375rem;\n line-height: 1.75rem;\n letter-spacing: -0.012em;\n}\n.nexus-modal-desc {\n color: var(--color-text-muted);\n font-size: var(--text-text-xs, 0.75rem);\n margin-top: 0.25rem;\n}\n\n.nexus-modal-body {\n position: relative;\n overflow-y: auto;\n padding: 1.5rem 1.25rem 0;\n}\n.nexus-modal-body::-webkit-scrollbar {\n display: none;\n}\n.nexus-modal-body--no-footer {\n padding-bottom: 1.5rem;\n}\n.nexus-modal-body--bottom-sheet {\n margin-top: 1.5rem;\n max-height: calc(100vh - 108px);\n padding: 0 0 1.5rem;\n}\n.nexus-modal-body--slide,\n.nexus-modal-body--full-page {\n height: 100%;\n max-height: 100%;\n overflow-y: auto;\n}\n.nexus-modal-body--full-page {\n padding-bottom: 0;\n}\n\n.nexus-modal-footer {\n position: absolute;\n bottom: 0;\n left: 0;\n z-index: 2;\n display: flex;\n width: 100%;\n padding: 1.5rem 1.25rem 1.25rem;\n}\n.nexus-modal-footer button {\n height: 3rem;\n flex: 1;\n}\n.nexus-modal-footer--bottom-sheet {\n padding: 0.75rem 1rem 1.5rem;\n}\n.nexus-modal-footer--draggable {\n position: relative;\n}\n\n.nexus-modal-dim {\n pointer-events: auto;\n position: fixed;\n inset: 0;\n z-index: 1;\n display: block;\n height: 100vh;\n width: 100vw;\n background: color-mix(\n in srgb,\n var(--color-static-black, #000) 75%,\n transparent\n );\n}\n.nexus-modal-dim--hidden {\n display: none;\n}\n.nexus-modal-dim--draggable {\n background: color-mix(\n in srgb,\n var(--color-static-black, #000) 30%,\n transparent\n );\n}\n\n.nexus-modal-bottom-sheet-handle {\n display: flex;\n width: 100%;\n justify-content: center;\n padding-top: 0.75rem;\n padding-bottom: 0.5rem;\n}\n.nexus-modal-bottom-sheet-bar {\n background: var(--color-border-default);\n height: 0.375rem;\n width: 4rem;\n border-radius: 9999px;\n}\n\n.nexus-modal-component {\n opacity: 0;\n}\n.nexus-modal-component--visible {\n opacity: 1;\n}\n.nexus-modal-component--portal {\n position: relative;\n}\n.nexus-modal-component--enter .nexus-modal-inner {\n animation-direction: var(--modal-animation-direction);\n animation-duration: var(--modal-animation-duration);\n animation-name: var(--modal-animation-name);\n animation-timing-function: var(--modal-animation-timing-function);\n}\n.nexus-modal-component--leave .nexus-modal-inner {\n animation-direction: reverse;\n animation-duration: var(--modal-animation-duration);\n animation-fill-mode: var(--modal-animation-fill-mode);\n animation-name: var(--modal-animation-name);\n animation-timing-function: var(--modal-animation-timing-function);\n}\n\n.nexus-contents {\n display: contents;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Animation utilities (Radix enter/exit)\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-animate-in {\n animation: nexus-enter 200ms ease-out;\n --nx-enter-opacity: 1;\n --nx-enter-scale: 1;\n --nx-enter-translate-x: 0;\n --nx-enter-translate-y: 0;\n}\n.nexus-animate-out {\n animation: nexus-exit 150ms ease-in forwards;\n --nx-exit-opacity: 1;\n --nx-exit-scale: 1;\n --nx-exit-translate-x: 0;\n --nx-exit-translate-y: 0;\n}\n.nexus-fade-in-0 {\n --nx-enter-opacity: 0;\n}\n.nexus-fade-out-0 {\n --nx-exit-opacity: 0;\n}\n.nexus-zoom-in-95 {\n --nx-enter-scale: 0.95;\n}\n.nexus-zoom-out-95 {\n --nx-exit-scale: 0.95;\n}\n.nexus-slide-in-from-top-2 {\n --nx-enter-translate-y: -0.5rem;\n}\n.nexus-slide-in-from-bottom-2 {\n --nx-enter-translate-y: 0.5rem;\n}\n.nexus-slide-in-from-left-2 {\n --nx-enter-translate-x: -0.5rem;\n}\n.nexus-slide-in-from-right-2 {\n --nx-enter-translate-x: 0.5rem;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Keyframes\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n@keyframes nexus-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes nexus-enter {\n from {\n opacity: var(--nx-enter-opacity, 1);\n transform: translate3d(\n var(--nx-enter-translate-x, 0),\n var(--nx-enter-translate-y, 0),\n 0\n )\n scale3d(\n var(--nx-enter-scale, 1),\n var(--nx-enter-scale, 1),\n var(--nx-enter-scale, 1)\n );\n }\n}\n\n@keyframes nexus-exit {\n to {\n opacity: var(--nx-exit-opacity, 1);\n transform: translate3d(\n var(--nx-exit-translate-x, 0),\n var(--nx-exit-translate-y, 0),\n 0\n )\n scale3d(\n var(--nx-exit-scale, 1),\n var(--nx-exit-scale, 1),\n var(--nx-exit-scale, 1)\n );\n }\n}\n\n@keyframes nexus-accordion-down {\n from {\n height: 0;\n }\n to {\n height: var(--radix-accordion-content-height);\n }\n}\n\n@keyframes nexus-accordion-up {\n from {\n height: var(--radix-accordion-content-height);\n }\n to {\n height: 0;\n }\n}\n\n@keyframes nexus-skeleton-shimmer {\n 0% {\n background-position: 300% 0;\n }\n 100% {\n background-position: -300% 0;\n }\n}\n\n@keyframes modal-fade {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes modal-fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes modal-scale {\n from {\n transform: scale(0);\n }\n to {\n transform: scale(1);\n }\n}\n\n@keyframes modal-small-scale {\n from {\n transform: scale(0.9);\n }\n to {\n transform: scale(1);\n }\n}\n\n@keyframes modal-pop-fade {\n 0% {\n transform: scale(0.95);\n opacity: 0;\n }\n 60% {\n transform: scale(1.03);\n opacity: 1;\n }\n 100% {\n transform: scale(1);\n opacity: 1;\n }\n}\n\n@keyframes modal-bottom-sheet {\n from {\n transform: translateY(calc(100% + 60px));\n }\n to {\n transform: translateY(0);\n }\n}\n\n@keyframes modal-slide-left {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(0);\n }\n}\n\n@keyframes modal-slide-right {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n}\n\n@keyframes modal-full-page {\n from {\n transform: translateY(60%);\n opacity: 0.5;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n@keyframes modal-full-page-reverse {\n from {\n transform: translateY(-60%);\n opacity: 0.5;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n EmptyState\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n gap: var(--spacing-gap-sm, 0.5rem);\n padding: var(--spacing-padding-lg, 1.5rem);\n color: var(--color-text-primary);\n}\n.nexus-empty-state__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: var(--spacing-gap-xs, 0.25rem);\n color: var(--color-icon-muted);\n}\n.nexus-empty-state__default-icon {\n width: var(--size-icon-xl, 2rem);\n height: var(--size-icon-xl, 2rem);\n}\n.nexus-empty-state--sm .nexus-empty-state__default-icon {\n width: var(--size-icon-lg, 1.5rem);\n height: var(--size-icon-lg, 1.5rem);\n}\n.nexus-empty-state--lg .nexus-empty-state__default-icon {\n width: var(--size-control-md, 2.5rem);\n height: var(--size-control-md, 2.5rem);\n}\n.nexus-empty-state__title {\n margin: 0;\n font-size: var(--text-heading-h6, 1rem);\n font-weight: var(--font-weight-heading-h6, 600);\n letter-spacing: var(--letter-spacing-heading-h6, 0);\n color: var(--color-text-primary);\n}\n.nexus-empty-state__description {\n margin: 0;\n max-width: 24rem;\n font-size: var(--text-text-sm, 0.875rem);\n font-weight: var(--font-weight-text-sm, 400);\n letter-spacing: var(--letter-spacing-text-sm, -0.01em);\n color: var(--color-text-secondary);\n}\n.nexus-empty-state__action {\n margin-top: var(--spacing-gap-sm, 0.5rem);\n}\n.nexus-empty-state--sm {\n padding: var(--spacing-padding-md, 1rem);\n gap: var(--spacing-gap-xs, 0.25rem);\n}\n.nexus-empty-state--sm .nexus-empty-state__title {\n font-size: var(--text-text-semibold-sm, 0.875rem);\n}\n.nexus-empty-state--sm .nexus-empty-state__description {\n font-size: var(--text-text-xs, 0.75rem);\n}\n.nexus-empty-state--lg {\n padding: var(--spacing-padding-xl, 2rem);\n gap: var(--spacing-gap-md, 1rem);\n}\n.nexus-empty-state--lg .nexus-empty-state__title {\n font-size: var(--text-heading-h5, 1.125rem);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Breadcrumb\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-breadcrumb {\n font-size: var(--text-text-sm, 0.875rem);\n line-height: 1.25;\n}\n.nexus-breadcrumb__list {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n list-style: none;\n margin: 0;\n padding: 0;\n gap: 0;\n}\n.nexus-breadcrumb__item {\n display: inline-flex;\n align-items: center;\n}\n.nexus-breadcrumb__separator {\n display: inline-flex;\n align-items: center;\n margin: 0 var(--spacing-gap-xs, 0.25rem);\n color: var(--color-icon-tertiary);\n user-select: none;\n}\n.nexus-breadcrumb__separator-icon {\n width: var(--size-icon-xs, 0.75rem);\n height: var(--size-icon-xs, 0.75rem);\n}\n.nexus-breadcrumb__link {\n color: var(--color-text-secondary);\n text-decoration: none;\n transition: color 150ms ease;\n}\n.nexus-breadcrumb__link:hover {\n color: var(--color-text-primary);\n}\n.nexus-breadcrumb__link--btn {\n border: none;\n background: none;\n cursor: pointer;\n font: inherit;\n padding: 0;\n}\n.nexus-breadcrumb__current {\n color: var(--color-text-primary);\n font-weight: var(--font-weight-text-medium-sm, 500);\n}\n.nexus-breadcrumb__ellipsis {\n color: var(--color-text-tertiary);\n user-select: none;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n Stepper\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-stepper {\n width: 100%;\n}\n\n/* \u2500\u2500 Horizontal \u2500\u2500 */\n.nexus-stepper--horizontal {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n}\n.nexus-stepper--horizontal .nexus-stepper__step {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n}\n.nexus-stepper--horizontal .nexus-stepper__indicator-wrap {\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 100%;\n justify-content: center;\n}\n.nexus-stepper--horizontal .nexus-stepper__connector {\n flex: 1;\n height: 2px;\n background: var(--color-border-default);\n transition: background var(--duration-transition-normal, 200ms)\n var(--ease-transition-normal);\n}\n.nexus-stepper--horizontal .nexus-stepper__connector--hidden {\n visibility: hidden;\n}\n.nexus-stepper--horizontal .nexus-stepper__connector--completed {\n background: var(--color-accent-primary);\n}\n.nexus-stepper--horizontal .nexus-stepper__content {\n margin-top: var(--spacing-gap-sm, 0.5rem);\n padding: 0 var(--spacing-padding-2xs, 0.25rem);\n}\n\n/* \u2500\u2500 Vertical \u2500\u2500 */\n.nexus-stepper--vertical {\n display: flex;\n flex-direction: column;\n gap: 0;\n}\n.nexus-stepper--vertical .nexus-stepper__step {\n display: flex;\n flex-direction: row;\n align-items: stretch;\n gap: var(--spacing-gap-sm, 0.5rem);\n}\n.nexus-stepper--vertical .nexus-stepper__indicator-wrap {\n display: flex;\n flex-direction: column;\n align-items: center;\n flex-shrink: 0;\n}\n.nexus-stepper--vertical .nexus-stepper__connector {\n width: 2px;\n flex: 1;\n min-height: var(--spacing-padding-sm, 0.75rem);\n background: var(--color-border-default);\n transition: background var(--duration-transition-normal, 200ms)\n var(--ease-transition-normal);\n}\n.nexus-stepper--vertical .nexus-stepper__connector--completed {\n background: var(--color-accent-primary);\n}\n.nexus-stepper--vertical .nexus-stepper__content {\n padding: var(--spacing-padding-xs, 0.5rem) 0;\n}\n\n/* \u2500\u2500 Indicator (\uACF5\uD1B5) \u2500\u2500 */\n.nexus-stepper__indicator {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--size-control-sm, 2rem);\n height: var(--size-control-sm, 2rem);\n border-radius: var(--radius-corner-full, 9999px);\n border: 2px solid var(--color-border-medium);\n background: var(--color-surface-default);\n font-size: var(--text-text-sm, 0.875rem);\n font-weight: var(--font-weight-text-medium-sm, 500);\n color: var(--color-text-secondary);\n transition: all var(--duration-transition-normal, 200ms)\n var(--ease-transition-normal);\n}\n.nexus-stepper--sm .nexus-stepper__indicator {\n width: 1.75rem;\n height: 1.75rem;\n font-size: var(--text-text-xs, 0.75rem);\n}\n.nexus-stepper__check {\n width: var(--size-icon-sm, 1rem);\n height: var(--size-icon-sm, 1rem);\n}\n.nexus-stepper--sm .nexus-stepper__check {\n width: var(--size-icon-xs, 0.75rem);\n height: var(--size-icon-xs, 0.75rem);\n}\n\n/* \u2500\u2500 State colors \u2500\u2500 */\n.nexus-stepper__step--completed .nexus-stepper__indicator {\n border-color: var(--color-accent-primary);\n background: var(--color-accent-primary);\n color: var(--color-accent-on-primary);\n}\n.nexus-stepper__step--active .nexus-stepper__indicator {\n border-color: var(--color-accent-primary);\n color: var(--color-accent-primary);\n background: var(--color-surface-default);\n box-shadow: 0 0 0 3px\n color-mix(in srgb, var(--color-accent-primary) 20%, transparent);\n}\n.nexus-stepper__step--error .nexus-stepper__indicator {\n border-color: var(--color-status-danger);\n color: var(--color-status-danger);\n background: var(--color-surface-default);\n box-shadow: 0 0 0 3px\n color-mix(in srgb, var(--color-status-danger) 20%, transparent);\n}\n.nexus-stepper__step--pending .nexus-stepper__indicator {\n border-color: var(--color-border-default);\n color: var(--color-text-tertiary);\n}\n\n/* \u2500\u2500 Labels \u2500\u2500 */\n.nexus-stepper__label {\n display: block;\n font-size: var(--text-text-sm, 0.875rem);\n font-weight: var(--font-weight-text-medium-sm, 500);\n color: var(--color-text-primary);\n}\n.nexus-stepper--sm .nexus-stepper__label {\n font-size: var(--text-text-xs, 0.75rem);\n}\n.nexus-stepper__description {\n display: block;\n margin-top: var(--spacing-gap-xs, 0.25rem);\n font-size: var(--text-text-xs, 0.75rem);\n color: var(--color-text-secondary);\n}\n.nexus-stepper__step--pending .nexus-stepper__label {\n color: var(--color-text-secondary);\n}\n.nexus-stepper__step--pending .nexus-stepper__description {\n color: var(--color-text-muted);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n TagInput\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-tag-input-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-gap-xs, 0.25rem);\n}\n.nexus-tag-input__label {\n font-size: var(--text-label-md, 0.875rem);\n font-weight: var(--font-weight-label-md, 500);\n color: var(--color-text-primary);\n}\n.nexus-tag-input {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--spacing-gap-xs, 0.25rem);\n padding: var(--spacing-padding-xs, 0.5rem);\n border: var(--border-width-stroke-default, 1px) solid\n var(--color-border-default);\n border-radius: var(--radius-corner-md, 0.5rem);\n background: var(--color-surface-default);\n cursor: text;\n transition: border-color 150ms ease;\n}\n.nexus-tag-input:focus-within {\n border-color: var(--color-border-default-focus, var(--color-accent-primary));\n}\n.nexus-tag-input--disabled {\n opacity: var(--opacity-disabled-element, 0.4);\n cursor: not-allowed;\n pointer-events: none;\n}\n.nexus-tag-input--sm {\n padding: var(--spacing-padding-2xs, 0.25rem);\n gap: 0.125rem;\n font-size: var(--text-text-xs, 0.75rem);\n}\n.nexus-tag-input--md {\n font-size: var(--text-text-sm, 0.875rem);\n}\n.nexus-tag-input--lg {\n padding: var(--spacing-padding-sm, 0.75rem);\n font-size: var(--text-text-base, 1rem);\n}\n.nexus-tag-input__tag {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n padding: 0.125rem 0.5rem;\n border-radius: var(--radius-corner-sm, 0.25rem);\n background: var(--color-surface-subtle);\n color: var(--color-text-primary);\n font-size: inherit;\n line-height: 1.5;\n white-space: nowrap;\n}\n.nexus-tag-input__tag-close {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: transparent;\n cursor: pointer;\n padding: 0;\n margin: 0;\n color: var(--color-icon-tertiary);\n transition: color 150ms;\n}\n.nexus-tag-input__tag-close:hover {\n color: var(--color-icon-primary);\n}\n.nexus-tag-input__tag-close-icon {\n width: 0.75rem;\n height: 0.75rem;\n}\n.nexus-tag-input__input {\n flex: 1;\n min-width: 4rem;\n border: none;\n outline: none;\n background: transparent;\n font: inherit;\n color: var(--color-text-primary);\n padding: 0.125rem 0;\n}\n.nexus-tag-input__input::placeholder {\n color: var(--color-text-muted);\n}\n.nexus-tag-input__description {\n font-size: var(--text-text-xs, 0.75rem);\n color: var(--color-text-secondary);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n NxImage\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-image {\n position: relative;\n overflow: hidden;\n display: block;\n background: var(--color-surface-subtle);\n}\n.nexus-image__fallback {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n min-height: 4rem;\n color: var(--color-icon-muted);\n}\n.nexus-image__fallback-icon {\n width: var(--size-icon-xl, 2rem);\n height: var(--size-icon-xl, 2rem);\n}\n.nexus-image__skeleton {\n position: absolute;\n inset: 0;\n background: linear-gradient(\n 90deg,\n var(--color-surface-subtle) 25%,\n var(--color-surface-default) 50%,\n var(--color-surface-subtle) 75%\n );\n background-size: 200% 100%;\n animation: nexus-shimmer 1.5s infinite;\n}\n.nexus-image__img {\n display: block;\n width: 100%;\n height: 100%;\n opacity: 0;\n transition: opacity 300ms ease;\n}\n.nexus-image__img--loaded {\n opacity: 1;\n}\n.nexus-image__img--cover {\n object-fit: cover;\n}\n.nexus-image__img--contain {\n object-fit: contain;\n}\n.nexus-image__img--fill {\n object-fit: fill;\n}\n.nexus-image__img--none {\n object-fit: none;\n}\n\n@keyframes nexus-shimmer {\n 0% {\n background-position: -200% 0;\n }\n 100% {\n background-position: 200% 0;\n }\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n DatePicker / Calendar\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.nexus-datepicker {\n display: inline-block;\n}\n\n/* \u2014 Trigger \u2014 */\n.nexus-datepicker__trigger {\n display: inline-flex;\n align-items: center;\n gap: var(--spacing-gap-sm, 0.5rem);\n padding: var(--spacing-padding-xs, 0.5rem) var(--spacing-padding-sm, 0.75rem);\n border: var(--border-width-stroke-default, 1px) solid\n var(--color-border-default);\n border-radius: var(--radius-corner-md, 0.5rem);\n background: var(--color-surface-default);\n font: inherit;\n font-size: var(--text-text-sm, 0.875rem);\n color: var(--color-text-primary);\n cursor: pointer;\n transition:\n border-color 150ms,\n box-shadow 150ms;\n min-width: 10rem;\n}\n.nexus-datepicker__trigger:hover {\n border-color: var(--color-border-default-hover);\n box-shadow: 0 0 0 0.5px var(--color-border-default-hover);\n}\n.nexus-datepicker__trigger:focus-visible,\n.nexus-datepicker__trigger[data-state='open'] {\n outline: none;\n border-color: var(--color-accent-primary);\n box-shadow: 0 0 0 0.5px var(--color-accent-primary);\n}\n.nexus-datepicker__trigger:disabled {\n opacity: var(--opacity-disabled-element, 0.4);\n cursor: not-allowed;\n}\n.nexus-datepicker__trigger--placeholder span {\n color: var(--color-text-muted);\n}\n.nexus-datepicker__trigger--has-value {\n border-color: var(--color-border-default-hover);\n}\n.nexus-datepicker__icon {\n width: var(--size-icon-sm, 1rem);\n height: var(--size-icon-sm, 1rem);\n flex-shrink: 0;\n color: var(--color-icon-secondary);\n transition: color 150ms;\n}\n\n/* \u2014 Popover (Radix Portal \uAE30\uBC18 \u2014 position\uC740 Radix\uAC00 \uC778\uB77C\uC778\uC73C\uB85C \uCC98\uB9AC) \u2014 */\n.nexus-datepicker__popover {\n z-index: var(--z-index-layer-popover, 30);\n background: var(--color-surface-default);\n border: var(--border-width-stroke-default, 1px) solid\n var(--color-border-default);\n border-radius: var(--radius-corner-lg, 0.75rem);\n box-shadow: var(--shadow-xl, 0 4px 15px -3px rgb(0 0 0 / 0.12));\n padding: var(--spacing-padding-sm, 0.75rem) var(--spacing-padding-md, 1rem)\n var(--spacing-padding-md, 1rem);\n animation: nexus-datepicker-enter-bottom 200ms cubic-bezier(0, 0, 0.2, 1);\n}\n\n/* \u2014 Calendar \u2014 */\n.nexus-calendar {\n position: relative;\n font-size: var(--text-text-sm, 0.875rem);\n}\n.nexus-calendar__months {\n display: flex;\n flex-direction: column;\n}\n\n/* \u2014 Caption (Month/Year) \u2014 \uC67C\uCABD \uC815\uB82C, nav\uACFC \uAC19\uC740 \uC904 */\n.nexus-calendar__caption {\n display: flex;\n align-items: center;\n height: 2.5rem;\n font-weight: var(--font-weight-heading-h6, 600);\n font-size: var(--text-text-base, 1rem);\n color: var(--color-text-primary);\n letter-spacing: -0.01em;\n}\n\n/* \u2014 Nav Buttons \u2014 \uC624\uB978\uCABD, \uCEA1\uC158\uACFC \uC218\uC9C1 \uC911\uC559 \uC815\uB82C */\n.nexus-calendar__nav {\n position: absolute;\n top: 0;\n right: 0;\n height: 2.5rem;\n display: flex;\n align-items: center;\n gap: var(--spacing-gap-xs, 0.25rem);\n}\n.nexus-calendar__nav-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 2rem;\n height: 2rem;\n border: none;\n background: transparent;\n border-radius: var(--radius-corner-full, 9999px);\n cursor: pointer;\n color: var(--color-icon-tertiary);\n transition:\n background 150ms,\n color 150ms;\n}\n.nexus-calendar__nav-btn svg {\n width: 1.125rem;\n height: 1.125rem;\n stroke-width: 2;\n}\n.nexus-calendar__nav-btn:hover {\n background: color-mix(in srgb, var(--color-accent-primary) 12%, transparent);\n color: var(--color-accent-primary);\n}\n.nexus-calendar__nav-btn:active {\n background: color-mix(in srgb, var(--color-accent-primary) 20%, transparent);\n}\n\n/* \u2014 Grid \u2014 table \uACE0\uC720 \uB808\uC774\uC544\uC6C3 \uC0AC\uC6A9 (\uBE48 \uC140\uB3C4 \uB108\uBE44 \uC720\uC9C0) */\n.nexus-calendar__grid {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0 2px;\n}\n\n/* \u2014 Weekday Header \u2014 */\n.nexus-calendar__head-cell {\n width: 2.5rem;\n height: 2.25rem;\n text-align: center;\n vertical-align: middle;\n font-size: var(--text-text-xs, 0.75rem);\n font-weight: var(--font-weight-label-md, 500);\n color: var(--color-text-secondary);\n}\n\n/* \u2014 Day Cell \u2014 */\n.nexus-calendar__cell {\n text-align: center;\n vertical-align: middle;\n padding: 0;\n}\n\n/* \u2014 Day Button \u2014 */\n.nexus-calendar__day {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 2.5rem;\n height: 2.5rem;\n border: 2px solid transparent;\n background: transparent;\n border-radius: var(--radius-corner-full, 9999px);\n cursor: pointer;\n font: inherit;\n font-size: var(--text-text-sm, 0.875rem);\n color: var(--color-text-primary);\n position: relative;\n transition:\n background 150ms,\n color 150ms,\n border-color 150ms,\n box-shadow 150ms;\n}\n.nexus-calendar__day:hover {\n background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent);\n}\n.nexus-calendar__day:active {\n background: color-mix(in srgb, var(--color-accent-primary) 18%, transparent);\n}\n\n/* Selected \u2014 \uC9C4\uD55C accent \uCC44\uC6C0 (selected \uD074\uB798\uC2A4\uB294 <td>\uC5D0 \uBD99\uC73C\uBBC0\uB85C \uB0B4\uBD80 button \uB300\uC0C1) */\n.nexus-calendar__day--selected .nexus-calendar__day {\n background: var(--color-accent-primary);\n color: var(--color-accent-on-primary);\n font-weight: var(--font-weight-text-semibold-sm, 600);\n border-color: transparent;\n}\n.nexus-calendar__day--selected .nexus-calendar__day:hover {\n background: var(--color-accent-primary-hover);\n}\n\n/* Today \u2014 \uC5F0\uD55C accent \uBC30\uACBD */\n.nexus-calendar__day--today .nexus-calendar__day {\n background: color-mix(in srgb, var(--color-accent-primary) 14%, transparent);\n color: var(--color-accent-primary);\n font-weight: var(--font-weight-text-semibold-sm, 600);\n}\n.nexus-calendar__day--today .nexus-calendar__day:hover {\n background: color-mix(in srgb, var(--color-accent-primary) 22%, transparent);\n}\n.nexus-calendar__day--today.nexus-calendar__day--selected .nexus-calendar__day {\n background: var(--color-accent-primary);\n color: var(--color-accent-on-primary);\n border-color: transparent;\n}\n\n/* Outside month */\n.nexus-calendar__day--outside .nexus-calendar__day {\n color: var(--color-text-muted);\n opacity: 0.35;\n}\n.nexus-calendar__day--outside .nexus-calendar__day:hover {\n opacity: 0.55;\n}\n\n/* Disabled */\n.nexus-calendar__day--disabled .nexus-calendar__day {\n color: var(--color-text-muted);\n opacity: var(--opacity-disabled-element, 0.4);\n cursor: not-allowed;\n pointer-events: none;\n}\n\n@keyframes nexus-datepicker-enter-bottom {\n from {\n opacity: 0;\n transform: translateY(-6px) scale(0.98);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n@keyframes nexus-datepicker-enter-top {\n from {\n opacity: 0;\n transform: translateY(6px) scale(0.98);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n.nexus-datepicker__popover[data-side='bottom'] {\n animation-name: nexus-datepicker-enter-bottom;\n}\n.nexus-datepicker__popover[data-side='top'] {\n animation-name: nexus-datepicker-enter-top;\n}\n@media (prefers-reduced-motion: reduce) {\n .nexus-datepicker__popover {\n animation: none;\n }\n .nexus-calendar__day {\n transition: none;\n }\n .nexus-datepicker__trigger {\n transition: none;\n }\n .nexus-calendar__nav-btn {\n transition: none;\n }\n .nexus-datepicker__icon {\n transition: none;\n }\n}\n\n@keyframes nexus-fade-in {\n from {\n opacity: 0;\n transform: translateY(-4px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* \u2500\u2500\u2500 ImageUpload \u2500\u2500\u2500 */\n.nexus-image-upload__container {\n width: 100%;\n background: var(--color-bg-subtle);\n border-radius: var(--radius-corner-md, 8px);\n overflow: hidden;\n}\n.nexus-image-upload {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--spacing-gap-sm, 0.5rem);\n width: 100%;\n border: 1px dashed var(--color-border-medium);\n border-radius: var(--radius-corner-md, 8px);\n background: transparent;\n cursor: pointer;\n overflow: hidden;\n transition:\n border-color 150ms ease,\n background-color 150ms ease,\n box-shadow 150ms ease;\n outline: none;\n}\n.nexus-image-upload:hover {\n border-color: var(--color-border-default-hover);\n box-shadow: 0 0 0 0.5px var(--color-border-default-hover);\n}\n.nexus-image-upload:focus-visible {\n outline: none;\n border-color: var(--color-accent-primary);\n box-shadow: 0 0 0 0.5px var(--color-accent-primary);\n}\n.nexus-image-upload--dragging {\n border-color: var(--color-accent-primary);\n border-style: solid;\n background: color-mix(\n in srgb,\n var(--color-accent-primary) 6%,\n var(--color-surface-default)\n );\n}\n.nexus-image-upload--disabled {\n opacity: var(--opacity-disabled-element, 0.4);\n cursor: not-allowed;\n pointer-events: none;\n}\n\n.nexus-image-upload--sm {\n padding: var(--spacing-padding-xs, 0.5rem) var(--spacing-padding-sm, 0.75rem);\n min-height: 80px;\n}\n.nexus-image-upload--md {\n padding: var(--spacing-padding-md, 1rem) var(--spacing-padding-sm, 0.75rem);\n min-height: 120px;\n}\n.nexus-image-upload--lg {\n padding: var(--spacing-padding-xl, 2rem) var(--spacing-padding-md, 1rem);\n min-height: 180px;\n}\n\n.nexus-image-upload__icon {\n width: var(--size-icon-xl, 32px);\n height: var(--size-icon-xl, 32px);\n color: var(--color-icon-muted);\n flex-shrink: 0;\n}\n.nexus-image-upload--sm .nexus-image-upload__icon {\n width: var(--size-icon-lg, 24px);\n height: var(--size-icon-lg, 24px);\n}\n\n.nexus-image-upload__text-group {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--spacing-gap-xs, 0.25rem);\n}\n.nexus-image-upload__text {\n font-size: var(--text-text-medium-xs);\n font-weight: var(--font-weight-text-medium-xs, 500);\n line-height: 1.5;\n letter-spacing: var(--letter-spacing-text-medium-xs, -0.01em);\n color: var(--color-text-tertiary);\n white-space: nowrap;\n}\n.nexus-image-upload__format {\n font-size: var(--text-text-xs);\n font-weight: var(--font-weight-text-xs, 400);\n line-height: 1.5;\n letter-spacing: var(--letter-spacing-text-xs, -0.01em);\n color: var(--color-text-tertiary);\n word-break: keep-all;\n overflow-wrap: break-word;\n}\n.nexus-image-upload__input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n\n/* \u2500\u2500\u2500 ImageUpload: Preview State \u2500\u2500\u2500 */\n.nexus-image-upload--has-preview {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n gap: var(--spacing-gap-md, 1rem);\n padding: 6px 6px 0 0;\n overflow: visible;\n}\n.nexus-image-upload__preview-area {\n position: relative;\n flex-shrink: 0;\n}\n.nexus-image-upload__preview-wrapper {\n width: 116px;\n height: 116px;\n border-radius: var(--radius-corner-md, 8px);\n border: 1px solid var(--color-border-default);\n overflow: hidden;\n}\n.nexus-image-upload--sm .nexus-image-upload__preview-wrapper {\n width: 80px;\n height: 80px;\n}\n.nexus-image-upload--lg .nexus-image-upload__preview-wrapper {\n width: 160px;\n height: 160px;\n}\n.nexus-image-upload__preview {\n width: 100%;\n height: 100%;\n object-fit: contain;\n pointer-events: none;\n border-radius: var(--radius-corner-md, 8px);\n}\n.nexus-image-upload__remove {\n position: absolute;\n top: -6px;\n right: -6px;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n border: none;\n border-radius: var(--radius-corner-full, 9999px);\n background: var(--color-surface-inverted);\n color: var(--color-icon-inverted);\n cursor: pointer;\n transition: opacity 150ms ease;\n z-index: 1;\n}\n.nexus-image-upload__remove:hover {\n opacity: 0.8;\n}\n.nexus-image-upload__remove-icon {\n width: 16px;\n height: 16px;\n}\n\n.nexus-image-upload__info {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--spacing-gap-sm, 0.5rem);\n padding-top: 2px;\n}\n.nexus-image-upload__change-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: var(--size-control-xs, 24px);\n padding: var(--spacing-padding-2xs, 0.25rem) var(--spacing-padding-xs, 0.5rem);\n border: 1px solid var(--color-border-default);\n border-radius: var(--radius-corner-sm, 4px);\n background: var(--color-surface-default);\n font-size: var(--text-label-sm);\n font-weight: var(--font-weight-label-sm, 500);\n color: var(--color-text-primary);\n cursor: pointer;\n white-space: nowrap;\n transition:\n border-color 150ms ease,\n background-color 150ms ease;\n}\n.nexus-image-upload__change-btn:hover {\n border-color: var(--color-border-default-hover);\n background: var(--color-surface-default-hover);\n}\n\n/* \u2500\u2500\u2500 ImageUpload: Field wrapper (label + description) \u2500\u2500\u2500 */\n.nexus-image-upload-field {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-gap-xs, 0.25rem);\n}\n.nexus-image-upload-field__label {\n font-size: var(--text-label-semibold-md);\n font-weight: var(--font-weight-label-semibold-md, 600);\n line-height: 1;\n letter-spacing: var(--letter-spacing-label-semibold-md, 0);\n color: var(--color-text-tertiary);\n}\n.nexus-image-upload-field__description {\n font-size: var(--text-text-xs);\n font-weight: var(--font-weight-text-xs, 400);\n line-height: 1.5;\n letter-spacing: var(--letter-spacing-text-xs, -0.01em);\n color: var(--color-text-tertiary);\n margin: 0;\n}\n";
|
|
3
3
|
var built_default = css;
|
|
4
4
|
|
|
5
5
|
export { built_default };
|