@nexus-cross/design-system 1.0.4-beta.1 → 1.0.4

package/dist/styles.css

@@ -1,2 +1,3872 @@
-/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial}}}@layer theme{:root,:host{--nx-font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--nx-font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--nx-color-white:#fff;--nx-spacing:.25rem;--nx-container-sm:24rem;--nx-text-xs:.75rem;--nx-text-xs--line-height:calc(1 / .75);--nx-text-sm:.875rem;--nx-text-sm--line-height:calc(1.25 / .875);--nx-text-base:1rem;--nx-text-base--line-height:calc(1.5 / 1);--nx-text-lg:1.125rem;--nx-text-lg--line-height:calc(1.75 / 1.125);--nx-text-xl:1.25rem;--nx-text-xl--line-height:calc(1.75 / 1.25);--nx-text-2xl:1.5rem;--nx-text-2xl--line-height:calc(2 / 1.5);--nx-text-3xl:1.875rem;--nx-text-3xl--line-height:calc(2.25 / 1.875);--nx-text-4xl:2.25rem;--nx-text-4xl--line-height:calc(2.5 / 2.25);--nx-font-weight-normal:400;--nx-font-weight-medium:500;--nx-font-weight-semibold:600;--nx-font-weight-bold:700;--nx-tracking-tight:-.025em;--nx-tracking-widest:.1em;--nx-leading-relaxed:1.625;--nx-radius-md:.375rem;--nx-radius-lg:.5rem;--nx-radius-2xl:1rem;--nx-animate-spin:spin 1s linear infinite;--nx-blur-sm:8px;--nx-blur-md:12px;--nx-default-transition-duration:.15s;--nx-default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--nx-default-font-family:var(--nx-font-sans);--nx-default-mono-font-family:var(--nx-font-mono);--nx-animate-in:nexus-enter .2s ease-out;--nx-animate-out:nexus-exit .15s ease-in forwards;--nx-animate-accordion-down:nexus-accordion-down .2s ease-out;--nx-animate-accordion-up:nexus-accordion-up .2s ease-in;--nx-animate-skeleton:nexus-skeleton-shimmer 2.5s ease-in-out infinite;--nx-color-surface-default:var(--color-surface-default);--nx-color-surface-hover:var(--color-surface-hover,var(--color-surface-subtle));--nx-color-surface-pressed:var(--color-surface-pressed,var(--color-surface-strong));--nx-color-text-primary:var(--color-text-primary);--nx-color-text-secondary:var(--color-text-secondary);--nx-color-text-tertiary:var(--color-text-tertiary);--nx-color-text-muted:var(--color-text-muted);--nx-color-border-default:var(--color-border-default);--nx-color-border-strong:var(--color-border-strong);--nx-color-accent-primary:var(--color-accent-primary);--nx-color-accent-on-primary:var(--color-accent-on-primary);--nx-color-accent-primary-focus:var(--color-accent-primary-focus,var(--color-accent-primary));--nx-color-accent-secondary-focus:var(--color-accent-secondary-focus,var(--color-accent-secondary));--nx-color-static-black:var(--color-static-black,#000);--nx-color-static-white:var(--color-static-white,#fff);--nx-color-status-danger-focus:var(--color-status-danger-focus,var(--color-status-danger));--nx-color-status-positive:var(--color-status-positive,var(--color-status-success));--nx-color-status-negative:var(--color-status-negative,var(--color-status-danger));--nx-color-status-caution:var(--color-status-caution,var(--color-status-warning));--nx-radius-corner-lg:var(--radius-corner-lg,12px);--nx-text-text-lg:var(--text-text-lg,1.125rem);--nx-color-comp-btn-focus-ring:var(--color-comp-btn-focus-ring,var(--color-accent-primary));--nx-color-comp-btn-primary-base:var(--color-comp-btn-primary-base,var(--color-accent-primary));--nx-color-comp-btn-primary-hover:var(--color-comp-btn-primary-hover,var(--color-accent-primary-hover));--nx-color-comp-btn-primary-pressed:var(--color-comp-btn-primary-pressed,var(--color-accent-primary-pressed));--nx-color-comp-btn-primary-on:var(--color-comp-btn-primary-on,var(--color-accent-on-primary));--nx-color-comp-btn-primary-text:var(--color-comp-btn-primary-text,var(--color-accent-primary-intense));--nx-color-comp-btn-primary-subtle-fill:var(--color-comp-btn-primary-subtle-fill,var(--color-accent-primary-disabled));--nx-color-comp-btn-primary-subtle-bg:var(--color-comp-btn-primary-subtle-bg,var(--color-accent-primary-bg));--nx-color-comp-btn-secondary-base:var(--color-comp-btn-secondary-base,var(--color-accent-secondary));--nx-color-comp-btn-secondary-hover:var(--color-comp-btn-secondary-hover,var(--color-accent-secondary-hover));--nx-color-comp-btn-secondary-pressed:var(--color-comp-btn-secondary-pressed,var(--color-accent-secondary-pressed));--nx-color-comp-btn-secondary-on:var(--color-comp-btn-secondary-on,var(--color-accent-on-secondary));--nx-color-comp-btn-secondary-text:var(--color-comp-btn-secondary-text,var(--color-accent-secondary-intense));--nx-color-comp-btn-secondary-subtle-fill:var(--color-comp-btn-secondary-subtle-fill,var(--color-accent-secondary-disabled));--nx-color-comp-btn-secondary-subtle-bg:var(--color-comp-btn-secondary-subtle-bg,var(--color-accent-secondary-bg));--nx-color-comp-btn-normal-base:var(--color-comp-btn-normal-base,var(--color-surface-subtle));--nx-color-comp-btn-normal-hover:var(--color-comp-btn-normal-hover,var(--color-surface-subtle-hover));--nx-color-comp-btn-normal-pressed:var(--color-comp-btn-normal-pressed,var(--color-surface-subtle-hover));--nx-color-comp-btn-normal-on:var(--color-comp-btn-normal-on,var(--color-text-primary));--nx-color-comp-btn-normal-text:var(--color-comp-btn-normal-text,var(--color-text-primary));--nx-color-comp-btn-normal-subtle-fill:var(--color-comp-btn-normal-subtle-fill,var(--color-surface-subtle));--nx-color-comp-btn-normal-subtle-bg:var(--color-comp-btn-normal-subtle-bg,var(--color-surface-subtle-hover));--nx-color-comp-btn-normal-border:var(--color-comp-btn-normal-border,var(--color-border-default));--nx-color-comp-btn-normal-border-hover:var(--color-comp-btn-normal-border-hover,var(--color-border-default-hover));--nx-color-comp-btn-danger-base:var(--color-comp-btn-danger-base,var(--color-status-danger));--nx-color-comp-btn-danger-hover:var(--color-comp-btn-danger-hover,var(--color-status-danger-hover));--nx-color-comp-btn-danger-pressed:var(--color-comp-btn-danger-pressed,var(--color-status-danger-pressed));--nx-color-comp-btn-danger-on:var(--color-comp-btn-danger-on,var(--color-static-white));--nx-color-comp-btn-danger-text:var(--color-comp-btn-danger-text,var(--color-status-danger-intense));--nx-color-comp-btn-danger-subtle-fill:var(--color-comp-btn-danger-subtle-fill,var(--color-status-danger-disabled));--nx-color-comp-btn-danger-subtle-bg:var(--color-comp-btn-danger-subtle-bg,var(--color-status-danger-bg));--nx-radius-comp-btn-xl:var(--radius-comp-btn-xl,.75rem);--nx-radius-comp-btn-lg:var(--radius-comp-btn-lg,.5rem);--nx-radius-comp-btn-md:var(--radius-comp-btn-md,.5rem);--nx-radius-comp-btn-sm:var(--radius-comp-btn-sm,.25rem);--nx-spacing-comp-btn-gap:var(--spacing-comp-btn-gap,.5rem);--nx-spacing-comp-btn-xl-h:var(--spacing-comp-btn-xl-h,3rem);--nx-spacing-comp-btn-xl-px:var(--spacing-comp-btn-xl-px,1.5rem);--nx-spacing-comp-btn-lg-h:var(--spacing-comp-btn-lg-h,2.5rem);--nx-spacing-comp-btn-lg-px:var(--spacing-comp-btn-lg-px,1.5rem);--nx-spacing-comp-btn-md-h:var(--spacing-comp-btn-md-h,1.875rem);--nx-spacing-comp-btn-md-px:var(--spacing-comp-btn-md-px,.75rem);--nx-spacing-comp-btn-sm-px:var(--spacing-comp-btn-sm-px,.5rem);--nx-spacing-comp-btn-sm-py:var(--spacing-comp-btn-sm-py,.25rem);--nx-text-comp-btn-xl:var(--text-comp-btn-xl,1rem);--nx-text-comp-btn-lg:var(--text-comp-btn-lg,1rem);--nx-text-comp-btn-md:var(--text-comp-btn-md,.875rem);--nx-text-comp-btn-sm:var(--text-comp-btn-sm,.75rem);--nx-opacity-comp-btn-disabled:var(--opacity-comp-btn-disabled,.5)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--nx-default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--nx-default-font-feature-settings,normal);font-variation-settings:var(--nx-default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--nx-default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--nx-default-mono-font-feature-settings,normal);font-variation-settings:var(--nx-default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.nx\:pointer-events-auto{pointer-events:auto}.nx\:pointer-events-none{pointer-events:none}.nx\:sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.nx\:absolute{position:absolute}.nx\:fixed{position:fixed}.nx\:relative{position:relative}.nx\:inset-0{inset:calc(var(--nx-spacing) * 0)}.nx\:inset-x-0{inset-inline:calc(var(--nx-spacing) * 0)}.nx\:inset-y-0{inset-block:calc(var(--nx-spacing) * 0)}.nx\:top-0{top:calc(var(--nx-spacing) * 0)}.nx\:top-1\/2{top:50%}.nx\:top-6{top:calc(var(--nx-spacing) * 6)}.nx\:right-0{right:calc(var(--nx-spacing) * 0)}.nx\:right-2{right:calc(var(--nx-spacing) * 2)}.nx\:right-5{right:calc(var(--nx-spacing) * 5)}.nx\:bottom-0{bottom:calc(var(--nx-spacing) * 0)}.nx\:left-0{left:calc(var(--nx-spacing) * 0)}.nx\:left-2{left:calc(var(--nx-spacing) * 2)}.nx\:z-10{z-index:10}.nx\:z-50{z-index:50}.nx\:z-\[1\]{z-index:1}.nx\:z-\[2\]{z-index:2}.nx\:z-\[9999\]{z-index:9999}.nx\:z-\[99999\]{z-index:99999}.nx\:m-0{margin:calc(var(--nx-spacing) * 0)}.nx\:mx-0{margin-inline:calc(var(--nx-spacing) * 0)}.nx\:mx-0\.5{margin-inline:calc(var(--nx-spacing) * .5)}.nx\:my-0{margin-block:calc(var(--nx-spacing) * 0)}.nx\:mt-1{margin-top:calc(var(--nx-spacing) * 1)}.nx\:mt-3{margin-top:calc(var(--nx-spacing) * 3)}.nx\:mt-6{margin-top:calc(var(--nx-spacing) * 6)}.nx\:mt-24{margin-top:calc(var(--nx-spacing) * 24)}.nx\:mr-24{margin-right:calc(var(--nx-spacing) * 24)}.nx\:-mb-px{margin-bottom:-1px}.nx\:mb-24{margin-bottom:calc(var(--nx-spacing) * 24)}.nx\:ml-0\.5{margin-left:calc(var(--nx-spacing) * .5)}.nx\:ml-24{margin-left:calc(var(--nx-spacing) * 24)}.nx\:ml-auto{margin-left:auto}.nx\:block{display:block}.nx\:contents{display:contents}.nx\:flex{display:flex}.nx\:hidden{display:none}.nx\:inline-flex{display:inline-flex}.nx\:size-1\.5{width:calc(var(--nx-spacing) * 1.5);height:calc(var(--nx-spacing) * 1.5)}.nx\:size-2{width:calc(var(--nx-spacing) * 2);height:calc(var(--nx-spacing) * 2)}.nx\:size-3{width:calc(var(--nx-spacing) * 3);height:calc(var(--nx-spacing) * 3)}.nx\:size-3\.5{width:calc(var(--nx-spacing) * 3.5);height:calc(var(--nx-spacing) * 3.5)}.nx\:size-4{width:calc(var(--nx-spacing) * 4);height:calc(var(--nx-spacing) * 4)}.nx\:size-5{width:calc(var(--nx-spacing) * 5);height:calc(var(--nx-spacing) * 5)}.nx\:size-6{width:calc(var(--nx-spacing) * 6);height:calc(var(--nx-spacing) * 6)}.nx\:size-7{width:calc(var(--nx-spacing) * 7);height:calc(var(--nx-spacing) * 7)}.nx\:size-8{width:calc(var(--nx-spacing) * 8);height:calc(var(--nx-spacing) * 8)}.nx\:size-9{width:calc(var(--nx-spacing) * 9);height:calc(var(--nx-spacing) * 9)}.nx\:size-10{width:calc(var(--nx-spacing) * 10);height:calc(var(--nx-spacing) * 10)}.nx\:size-12{width:calc(var(--nx-spacing) * 12);height:calc(var(--nx-spacing) * 12)}.nx\:size-16{width:calc(var(--nx-spacing) * 16);height:calc(var(--nx-spacing) * 16)}.nx\:size-full{width:100%;height:100%}.nx\:h-1\.5{height:calc(var(--nx-spacing) * 1.5)}.nx\:h-3{height:calc(var(--nx-spacing) * 3)}.nx\:h-3\.5{height:calc(var(--nx-spacing) * 3.5)}.nx\:h-4{height:calc(var(--nx-spacing) * 4)}.nx\:h-5{height:calc(var(--nx-spacing) * 5)}.nx\:h-6{height:calc(var(--nx-spacing) * 6)}.nx\:h-7{height:calc(var(--nx-spacing) * 7)}.nx\:h-8{height:calc(var(--nx-spacing) * 8)}.nx\:h-10{height:calc(var(--nx-spacing) * 10)}.nx\:h-12{height:calc(var(--nx-spacing) * 12)}.nx\:h-comp-btn-lg-h{height:var(--nx-spacing-comp-btn-lg-h)}.nx\:h-comp-btn-md-h{height:var(--nx-spacing-comp-btn-md-h)}.nx\:h-comp-btn-xl-h{height:var(--nx-spacing-comp-btn-xl-h)}.nx\:h-full{height:100%}.nx\:h-px{height:1px}.nx\:h-screen{height:100vh}.nx\:max-h-96{max-height:calc(var(--nx-spacing) * 96)}.nx\:max-h-\[calc\(90vh-var\(--ft-height\,88px\)\)\]{max-height:calc(90vh - var(--ft-height,88px))}.nx\:max-h-\[calc\(90vh-var\(--ft-height\,88px\)-var\(--hd-height\,60px\)\)\]{max-height:calc(90vh - var(--ft-height,88px) - var(--hd-height,60px))}.nx\:max-h-\[calc\(90vh-var\(--hd-height\,60px\)\)\]{max-height:calc(90vh - var(--hd-height,60px))}.nx\:max-h-\[calc\(100\%-var\(--hd-height\,60px\)\)\]{max-height:calc(100% - var(--hd-height,60px))}.nx\:max-h-\[calc\(100vh-108px\)\]{max-height:calc(100vh - 108px)}.nx\:max-h-\[calc\(100vh-var\(--ft-height\,88px\)-var\(--hd-height\,60px\)\)\]{max-height:calc(100vh - var(--ft-height,88px) - var(--hd-height,60px))}.nx\:max-h-\[calc\(100vh-var\(--ft-height\,88px\)-var\(--hd-height\,60px\)-100px\)\]{max-height:calc(100vh - var(--ft-height,88px) - var(--hd-height,60px) - 100px)}.nx\:max-h-\[calc\(100vh-var\(--hd-height\,60px\)\)\]{max-height:calc(100vh - var(--hd-height,60px))}.nx\:max-h-\[calc\(100vh-var\(--hd-height\,60px\)-124px\)\]{max-height:calc(100vh - var(--hd-height,60px) - 124px)}.nx\:max-h-full{max-height:100%}.nx\:min-h-\[200px\]{min-height:200px}.nx\:w-3{width:calc(var(--nx-spacing) * 3)}.nx\:w-3\.5{width:calc(var(--nx-spacing) * 3.5)}.nx\:w-5{width:calc(var(--nx-spacing) * 5)}.nx\:w-6{width:calc(var(--nx-spacing) * 6)}.nx\:w-8{width:calc(var(--nx-spacing) * 8)}.nx\:w-9{width:calc(var(--nx-spacing) * 9)}.nx\:w-11{width:calc(var(--nx-spacing) * 11)}.nx\:w-12{width:calc(var(--nx-spacing) * 12)}.nx\:w-16{width:calc(var(--nx-spacing) * 16)}.nx\:w-32{width:calc(var(--nx-spacing) * 32)}.nx\:w-48{width:calc(var(--nx-spacing) * 48)}.nx\:w-\[85vw\]{width:85vw}.nx\:w-\[calc\(100\%-30px\)\]{width:calc(100% - 30px)}.nx\:w-\[var\(--radix-popper-anchor-width\)\]{width:var(--radix-popper-anchor-width)}.nx\:w-full{width:100%}.nx\:w-screen{width:100vw}.nx\:max-w-sm{max-width:var(--nx-container-sm)}.nx\:min-w-0{min-width:calc(var(--nx-spacing) * 0)}.nx\:min-w-\[320px\]{min-width:320px}.nx\:flex-1{flex:1}.nx\:shrink-0{flex-shrink:0}.nx\:grow-0{flex-grow:0}.nx\:basis-full{flex-basis:100%}.nx\:translate-x-0{--tw-translate-x:calc(var(--nx-spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.nx\:translate-x-4{--tw-translate-x:calc(var(--nx-spacing) * 4);translate:var(--tw-translate-x) var(--tw-translate-y)}.nx\:translate-x-5{--tw-translate-x:calc(var(--nx-spacing) * 5);translate:var(--tw-translate-x) var(--tw-translate-y)}.nx\:-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.nx\:rotate-180{rotate:180deg}.nx\:animate-skeleton{animation:var(--nx-animate-skeleton)}.nx\:animate-spin{animation:var(--nx-animate-spin)}.nx\:cursor-default{cursor:default}.nx\:cursor-grab{cursor:grab}.nx\:cursor-not-allowed{cursor:not-allowed}.nx\:cursor-pointer{cursor:pointer}.nx\:resize-none{resize:none}.nx\:flex-col{flex-direction:column}.nx\:flex-row{flex-direction:row}.nx\:flex-row-reverse{flex-direction:row-reverse}.nx\:items-center{align-items:center}.nx\:items-end{align-items:flex-end}.nx\:justify-between{justify-content:space-between}.nx\:justify-center{justify-content:center}.nx\:justify-end{justify-content:flex-end}.nx\:justify-start{justify-content:flex-start}.nx\:gap-1{gap:calc(var(--nx-spacing) * 1)}.nx\:gap-1\.5{gap:calc(var(--nx-spacing) * 1.5)}.nx\:gap-2{gap:calc(var(--nx-spacing) * 2)}.nx\:gap-3{gap:calc(var(--nx-spacing) * 3)}.nx\:gap-4{gap:calc(var(--nx-spacing) * 4)}.nx\:gap-comp-btn-gap{gap:var(--nx-spacing-comp-btn-gap)}.nx\:self-stretch{align-self:stretch}.nx\:truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.nx\:overflow-auto{overflow:auto}.nx\:overflow-hidden{overflow:hidden}.nx\:overflow-visible{overflow:visible}.nx\:overflow-x-auto{overflow-x:auto}.nx\:overflow-y-auto{overflow-y:auto}.nx\:\!rounded-full{border-radius:3.40282e38px!important}.nx\:rounded{border-radius:.25rem}.nx\:rounded-comp-btn-lg{border-radius:var(--nx-radius-comp-btn-lg)}.nx\:rounded-comp-btn-md{border-radius:var(--nx-radius-comp-btn-md)}.nx\:rounded-comp-btn-sm{border-radius:var(--nx-radius-comp-btn-sm)}.nx\:rounded-comp-btn-xl{border-radius:var(--nx-radius-comp-btn-xl)}.nx\:rounded-corner-lg{border-radius:var(--nx-radius-corner-lg)}.nx\:rounded-full{border-radius:3.40282e38px}.nx\:rounded-lg{border-radius:var(--nx-radius-lg)}.nx\:rounded-md{border-radius:var(--nx-radius-md)}.nx\:rounded-none{border-radius:0}.nx\:rounded-t-2xl{border-top-left-radius:var(--nx-radius-2xl);border-top-right-radius:var(--nx-radius-2xl)}.nx\:rounded-l-2xl{border-top-left-radius:var(--nx-radius-2xl);border-bottom-left-radius:var(--nx-radius-2xl)}.nx\:rounded-r-2xl{border-top-right-radius:var(--nx-radius-2xl);border-bottom-right-radius:var(--nx-radius-2xl)}.nx\:rounded-tr-md{border-top-right-radius:var(--nx-radius-md)}.nx\:rounded-b-2xl{border-bottom-right-radius:var(--nx-radius-2xl);border-bottom-left-radius:var(--nx-radius-2xl)}.nx\:rounded-b-none{border-bottom-right-radius:0;border-bottom-left-radius:0}.nx\:rounded-br-md{border-bottom-right-radius:var(--nx-radius-md)}.nx\:border{border-style:var(--tw-border-style);border-width:1px}.nx\:border-2{border-style:var(--tw-border-style);border-width:2px}.nx\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.nx\:border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.nx\:border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.nx\:border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.nx\:border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.nx\:border-dashed{--tw-border-style:dashed;border-style:dashed}.nx\:border-dotted{--tw-border-style:dotted;border-style:dotted}.nx\:border-none{--tw-border-style:none;border-style:none}.nx\:border-solid{--tw-border-style:solid;border-style:solid}.nx\:border-\[var\(--_btn-border\)\]{border-color:var(--_btn-border)}.nx\:border-accent-primary,.nx\:border-accent-primary\/30{border-color:var(--nx-color-accent-primary)}@supports (color:color-mix(in lab, red, red)){.nx\:border-accent-primary\/30{border-color:color-mix(in oklab, var(--nx-color-accent-primary) 30%, transparent)}}.nx\:border-border-default{border-color:var(--nx-color-border-default)}.nx\:border-status-caution\/30{border-color:var(--nx-color-status-caution)}@supports (color:color-mix(in lab, red, red)){.nx\:border-status-caution\/30{border-color:color-mix(in oklab, var(--nx-color-status-caution) 30%, transparent)}}.nx\:border-status-negative,.nx\:border-status-negative\/30{border-color:var(--nx-color-status-negative)}@supports (color:color-mix(in lab, red, red)){.nx\:border-status-negative\/30{border-color:color-mix(in oklab, var(--nx-color-status-negative) 30%, transparent)}}.nx\:border-status-positive\/30{border-color:var(--nx-color-status-positive)}@supports (color:color-mix(in lab, red, red)){.nx\:border-status-positive\/30{border-color:color-mix(in oklab, var(--nx-color-status-positive) 30%, transparent)}}.nx\:border-transparent{border-color:#0000}.nx\:border-t-accent-primary{border-top-color:var(--nx-color-accent-primary)}.nx\:bg-\[var\(--_btn-base\)\]{background-color:var(--_btn-base)}.nx\:bg-\[var\(--_btn-outlined-bg\)\]{background-color:var(--_btn-outlined-bg)}.nx\:bg-\[var\(--_btn-subtle-fill\)\]{background-color:var(--_btn-subtle-fill)}.nx\:bg-accent-primary,.nx\:bg-accent-primary\/10{background-color:var(--nx-color-accent-primary)}@supports (color:color-mix(in lab, red, red)){.nx\:bg-accent-primary\/10{background-color:color-mix(in oklab, var(--nx-color-accent-primary) 10%, transparent)}}.nx\:bg-border-default{background-color:var(--nx-color-border-default)}.nx\:bg-border-strong{background-color:var(--nx-color-border-strong)}.nx\:bg-current{background-color:currentColor}.nx\:bg-static-black,.nx\:bg-static-black\/30{background-color:var(--nx-color-static-black)}@supports (color:color-mix(in lab, red, red)){.nx\:bg-static-black\/30{background-color:color-mix(in oklab, var(--nx-color-static-black) 30%, transparent)}}.nx\:bg-static-black\/60{background-color:var(--nx-color-static-black)}@supports (color:color-mix(in lab, red, red)){.nx\:bg-static-black\/60{background-color:color-mix(in oklab, var(--nx-color-static-black) 60%, transparent)}}.nx\:bg-static-black\/75{background-color:var(--nx-color-static-black)}@supports (color:color-mix(in lab, red, red)){.nx\:bg-static-black\/75{background-color:color-mix(in oklab, var(--nx-color-static-black) 75%, transparent)}}.nx\:bg-static-white{background-color:var(--nx-color-static-white)}.nx\:bg-status-caution\/10{background-color:var(--nx-color-status-caution)}@supports (color:color-mix(in lab, red, red)){.nx\:bg-status-caution\/10{background-color:color-mix(in oklab, var(--nx-color-status-caution) 10%, transparent)}}.nx\:bg-status-negative\/10{background-color:var(--nx-color-status-negative)}@supports (color:color-mix(in lab, red, red)){.nx\:bg-status-negative\/10{background-color:color-mix(in oklab, var(--nx-color-status-negative) 10%, transparent)}}.nx\:bg-status-positive\/10{background-color:var(--nx-color-status-positive)}@supports (color:color-mix(in lab, red, red)){.nx\:bg-status-positive\/10{background-color:color-mix(in oklab, var(--nx-color-status-positive) 10%, transparent)}}.nx\:bg-surface-default{background-color:var(--nx-color-surface-default)}.nx\:bg-surface-hover{background-color:var(--nx-color-surface-hover)}.nx\:bg-transparent{background-color:#0000}.nx\:bg-white{background-color:var(--nx-color-white)}.nx\:bg-gradient-to-r{--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.nx\:from-surface-hover{--tw-gradient-from:var(--nx-color-surface-hover);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.nx\:via-surface-default{--tw-gradient-via:var(--nx-color-surface-default);--tw-gradient-via-stops:var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.nx\:to-surface-hover{--tw-gradient-to:var(--nx-color-surface-hover);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.nx\:bg-\[length\:300\%_100\%\]{background-size:300% 100%}.nx\:fill-surface-default{fill:var(--nx-color-surface-default)}.nx\:object-cover{object-fit:cover}.nx\:p-0{padding:calc(var(--nx-spacing) * 0)}.nx\:p-0\.5{padding:calc(var(--nx-spacing) * .5)}.nx\:p-1{padding:calc(var(--nx-spacing) * 1)}.nx\:p-4{padding:calc(var(--nx-spacing) * 4)}.nx\:px-1{padding-inline:calc(var(--nx-spacing) * 1)}.nx\:px-1\.5{padding-inline:calc(var(--nx-spacing) * 1.5)}.nx\:px-2{padding-inline:calc(var(--nx-spacing) * 2)}.nx\:px-2\.5{padding-inline:calc(var(--nx-spacing) * 2.5)}.nx\:px-3{padding-inline:calc(var(--nx-spacing) * 3)}.nx\:px-3\.5{padding-inline:calc(var(--nx-spacing) * 3.5)}.nx\:px-4{padding-inline:calc(var(--nx-spacing) * 4)}.nx\:px-5{padding-inline:calc(var(--nx-spacing) * 5)}.nx\:px-comp-btn-lg-px{padding-inline:var(--nx-spacing-comp-btn-lg-px)}.nx\:px-comp-btn-md-px{padding-inline:var(--nx-spacing-comp-btn-md-px)}.nx\:px-comp-btn-sm-px{padding-inline:var(--nx-spacing-comp-btn-sm-px)}.nx\:px-comp-btn-xl-px{padding-inline:var(--nx-spacing-comp-btn-xl-px)}.nx\:py-1\.5{padding-block:calc(var(--nx-spacing) * 1.5)}.nx\:py-2{padding-block:calc(var(--nx-spacing) * 2)}.nx\:py-2\.5{padding-block:calc(var(--nx-spacing) * 2.5)}.nx\:py-3{padding-block:calc(var(--nx-spacing) * 3)}.nx\:py-4{padding-block:calc(var(--nx-spacing) * 4)}.nx\:py-6{padding-block:calc(var(--nx-spacing) * 6)}.nx\:py-8{padding-block:calc(var(--nx-spacing) * 8)}.nx\:py-12{padding-block:calc(var(--nx-spacing) * 12)}.nx\:py-\[2px\]{padding-block:2px}.nx\:py-comp-btn-sm-py{padding-block:var(--nx-spacing-comp-btn-sm-py)}.nx\:pt-0{padding-top:calc(var(--nx-spacing) * 0)}.nx\:pt-1\.5{padding-top:calc(var(--nx-spacing) * 1.5)}.nx\:pt-3{padding-top:calc(var(--nx-spacing) * 3)}.nx\:pt-4{padding-top:calc(var(--nx-spacing) * 4)}.nx\:pt-6{padding-top:calc(var(--nx-spacing) * 6)}.nx\:pr-\[42px\]{padding-right:42px}.nx\:pb-0{padding-bottom:calc(var(--nx-spacing) * 0)}.nx\:pb-2{padding-bottom:calc(var(--nx-spacing) * 2)}.nx\:pb-4{padding-bottom:calc(var(--nx-spacing) * 4)}.nx\:pb-5{padding-bottom:calc(var(--nx-spacing) * 5)}.nx\:pb-6{padding-bottom:calc(var(--nx-spacing) * 6)}.nx\:pb-20{padding-bottom:calc(var(--nx-spacing) * 20)}.nx\:pb-\[88px\]{padding-bottom:88px}.nx\:text-center{text-align:center}.nx\:text-left{text-align:left}.nx\:text-right{text-align:right}.nx\:font-mono{font-family:var(--nx-font-mono)}.nx\:text-2xl{font-size:var(--nx-text-2xl);line-height:var(--tw-leading,var(--nx-text-2xl--line-height))}.nx\:text-3xl{font-size:var(--nx-text-3xl);line-height:var(--tw-leading,var(--nx-text-3xl--line-height))}.nx\:text-4xl{font-size:var(--nx-text-4xl);line-height:var(--tw-leading,var(--nx-text-4xl--line-height))}.nx\:text-base{font-size:var(--nx-text-base);line-height:var(--tw-leading,var(--nx-text-base--line-height))}.nx\:text-lg{font-size:var(--nx-text-lg);line-height:var(--tw-leading,var(--nx-text-lg--line-height))}.nx\:text-sm{font-size:var(--nx-text-sm);line-height:var(--tw-leading,var(--nx-text-sm--line-height))}.nx\:text-xl{font-size:var(--nx-text-xl);line-height:var(--tw-leading,var(--nx-text-xl--line-height))}.nx\:text-xs{font-size:var(--nx-text-xs);line-height:var(--tw-leading,var(--nx-text-xs--line-height))}.nx\:text-\[10px\]{font-size:10px}.nx\:text-comp-btn-lg{font-size:var(--nx-text-comp-btn-lg)}.nx\:text-comp-btn-md{font-size:var(--nx-text-comp-btn-md)}.nx\:text-comp-btn-sm{font-size:var(--nx-text-comp-btn-sm)}.nx\:text-comp-btn-xl{font-size:var(--nx-text-comp-btn-xl)}.nx\:text-text-lg{font-size:var(--nx-text-text-lg)}.nx\:leading-7{--tw-leading:calc(var(--nx-spacing) * 7);line-height:calc(var(--nx-spacing) * 7)}.nx\:leading-\[26px\]{--tw-leading:26px;line-height:26px}.nx\:leading-relaxed{--tw-leading:var(--nx-leading-relaxed);line-height:var(--nx-leading-relaxed)}.nx\:font-bold{--tw-font-weight:var(--nx-font-weight-bold);font-weight:var(--nx-font-weight-bold)}.nx\:font-medium{--tw-font-weight:var(--nx-font-weight-medium);font-weight:var(--nx-font-weight-medium)}.nx\:font-normal{--tw-font-weight:var(--nx-font-weight-normal);font-weight:var(--nx-font-weight-normal)}.nx\:font-semibold{--tw-font-weight:var(--nx-font-weight-semibold);font-weight:var(--nx-font-weight-semibold)}.nx\:tracking-\[-0\.002em\]{--tw-tracking:-.002em;letter-spacing:-.002em}.nx\:tracking-\[-0\.012em\]{--tw-tracking:-.012em;letter-spacing:-.012em}.nx\:tracking-tight{--tw-tracking:var(--nx-tracking-tight);letter-spacing:var(--nx-tracking-tight)}.nx\:tracking-widest{--tw-tracking:var(--nx-tracking-widest);letter-spacing:var(--nx-tracking-widest)}.nx\:break-words{overflow-wrap:break-word}.nx\:break-all{word-break:break-all}.nx\:whitespace-normal{white-space:normal}.nx\:whitespace-nowrap{white-space:nowrap}.nx\:text-\[var\(--_btn-on\)\]{color:var(--_btn-on)}.nx\:text-\[var\(--_btn-text\)\]{color:var(--_btn-text)}.nx\:text-accent-on-primary{color:var(--nx-color-accent-on-primary)}.nx\:text-accent-primary{color:var(--nx-color-accent-primary)}.nx\:text-current{color:currentColor}.nx\:text-inherit{color:inherit}.nx\:text-static-black{color:var(--nx-color-static-black)}.nx\:text-static-white{color:var(--nx-color-static-white)}.nx\:text-status-caution{color:var(--nx-color-status-caution)}.nx\:text-status-negative{color:var(--nx-color-status-negative)}.nx\:text-status-positive{color:var(--nx-color-status-positive)}.nx\:text-text-muted{color:var(--nx-color-text-muted)}.nx\:text-text-primary{color:var(--nx-color-text-primary)}.nx\:text-text-secondary{color:var(--nx-color-text-secondary)}.nx\:text-text-tertiary{color:var(--nx-color-text-tertiary)}.nx\:text-white{color:var(--nx-color-white)}.nx\:uppercase{text-transform:uppercase}.nx\:tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.nx\:opacity-0{opacity:0}.nx\:opacity-40{opacity:.4}.nx\:opacity-50{opacity:.5}.nx\:opacity-60{opacity:.6}.nx\:opacity-100{opacity:1}.nx\:shadow-comp-btn{--tw-shadow:var(--shadow-comp-btn,none);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.nx\:shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.nx\:shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.nx\:shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.nx\:outline{outline-style:var(--tw-outline-style);outline-width:1px}.nx\:-outline-offset-1{outline-offset:calc(1px * -1)}.nx\:outline-accent-primary{outline-color:var(--nx-color-accent-primary)}.nx\:backdrop-blur-md{--tw-backdrop-blur:blur(var(--nx-blur-md));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.nx\:backdrop-blur-sm{--tw-backdrop-blur:blur(var(--nx-blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.nx\:transition-\[height\]{transition-property:height;transition-timing-function:var(--tw-ease,var(--nx-default-transition-timing-function));transition-duration:var(--tw-duration,var(--nx-default-transition-duration))}.nx\:transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--nx-default-transition-timing-function));transition-duration:var(--tw-duration,var(--nx-default-transition-duration))}.nx\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--nx-default-transition-timing-function));transition-duration:var(--tw-duration,var(--nx-default-transition-duration))}.nx\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--nx-default-transition-timing-function));transition-duration:var(--tw-duration,var(--nx-default-transition-duration))}.nx\:transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--nx-default-transition-timing-function));transition-duration:var(--tw-duration,var(--nx-default-transition-duration))}.nx\:duration-150{--tw-duration:.15s;transition-duration:.15s}.nx\:duration-200{--tw-duration:.2s;transition-duration:.2s}.nx\:duration-300{--tw-duration:.3s;transition-duration:.3s}.nx\:outline-dashed{--tw-outline-style:dashed;outline-style:dashed}.nx\:outline-none{--tw-outline-style:none;outline-style:none}.nx\:select-none{-webkit-user-select:none;user-select:none}.nx\:peer-disabled\:cursor-not-allowed:is(:where(.nx\:peer):disabled~*){cursor:not-allowed}.nx\:peer-disabled\:opacity-50:is(:where(.nx\:peer):disabled~*){opacity:.5}.nx\:placeholder\:text-text-tertiary::placeholder{color:var(--nx-color-text-tertiary)}.nx\:focus-within\:border-status-negative:focus-within{border-color:var(--nx-color-status-negative)}.nx\:focus-within\:border-text-primary:focus-within{border-color:var(--nx-color-text-primary)}@media (hover:hover){.nx\:hover\:border-\[var\(--_btn-border-hover\)\]:hover{border-color:var(--_btn-border-hover)}.nx\:hover\:border-border-strong:hover{border-color:var(--nx-color-border-strong)}.nx\:hover\:bg-\[var\(--_btn-ghost-hover-bg\)\]:hover{background-color:var(--_btn-ghost-hover-bg)}.nx\:hover\:bg-\[var\(--_btn-hover\)\]:hover{background-color:var(--_btn-hover)}.nx\:hover\:bg-\[var\(--_btn-light-bg\)\]:hover{background-color:var(--_btn-light-bg)}.nx\:hover\:bg-\[var\(--_btn-outlined-hover-bg\)\]:hover{background-color:var(--_btn-outlined-hover-bg)}.nx\:hover\:bg-accent-primary\/5:hover{background-color:var(--nx-color-accent-primary)}@supports (color:color-mix(in lab, red, red)){.nx\:hover\:bg-accent-primary\/5:hover{background-color:color-mix(in oklab, var(--nx-color-accent-primary) 5%, transparent)}}.nx\:hover\:bg-surface-hover:hover{background-color:var(--nx-color-surface-hover)}.nx\:hover\:bg-text-tertiary:hover{background-color:var(--nx-color-text-tertiary)}.nx\:hover\:text-text-primary:hover{color:var(--nx-color-text-primary)}.nx\:hover\:opacity-100:hover{opacity:1}}.nx\:focus\:border-status-negative:focus{border-color:var(--nx-color-status-negative)}.nx\:focus\:border-text-primary:focus{border-color:var(--nx-color-text-primary)}.nx\:focus\:bg-surface-hover:focus{background-color:var(--nx-color-surface-hover)}.nx\:focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.nx\:focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.nx\:focus-visible\:ring-comp-btn-focus-ring\/50:focus-visible{--tw-ring-color:var(--nx-color-comp-btn-focus-ring)}@supports (color:color-mix(in lab, red, red)){.nx\:focus-visible\:ring-comp-btn-focus-ring\/50:focus-visible{--tw-ring-color:color-mix(in oklab, var(--nx-color-comp-btn-focus-ring) 50%, transparent)}}.nx\:focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.nx\:active\:cursor-grabbing:active{cursor:grabbing}.nx\:active\:border-\[var\(--_btn-border-hover\)\]:active{border-color:var(--_btn-border-hover)}.nx\:active\:bg-\[var\(--_btn-ghost-pressed-bg\)\]:active{background-color:var(--_btn-ghost-pressed-bg)}.nx\:active\:bg-\[var\(--_btn-light-bg\)\]:active{background-color:var(--_btn-light-bg)}.nx\:active\:bg-\[var\(--_btn-outlined-pressed-bg\)\]:active{background-color:var(--_btn-outlined-pressed-bg)}.nx\:active\:bg-\[var\(--_btn-pressed\)\]:active{background-color:var(--_btn-pressed)}.nx\:disabled\:pointer-events-none:disabled{pointer-events:none}.nx\:disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.nx\:disabled\:opacity-40:disabled{opacity:.4}.nx\:disabled\:opacity-50:disabled{opacity:.5}.nx\:disabled\:opacity-comp-btn-disabled:disabled{opacity:var(--nx-opacity-comp-btn-disabled)}.nx\:aria-disabled\:pointer-events-none[aria-disabled=true]{pointer-events:none}.nx\:aria-disabled\:opacity-50[aria-disabled=true]{opacity:.5}.nx\:aria-disabled\:opacity-comp-btn-disabled[aria-disabled=true]{opacity:var(--nx-opacity-comp-btn-disabled)}.nx\:data-\[disabled\]\:pointer-events-none[data-disabled]{pointer-events:none}.nx\:data-\[disabled\]\:opacity-50[data-disabled]{opacity:.5}.nx\:data-\[highlighted\]\:bg-surface-hover[data-highlighted]{background-color:var(--nx-color-surface-hover)}.nx\:data-\[side\=bottom\]\:slide-in-from-top-2[data-side=bottom]{--tw-enter-translate-y:calc(2 * -.25rem)}.nx\:data-\[side\=left\]\:slide-in-from-right-2[data-side=left]{--tw-enter-translate-x:calc(2 * .25rem)}.nx\:data-\[side\=right\]\:slide-in-from-left-2[data-side=right]{--tw-enter-translate-x:calc(2 * -.25rem)}.nx\:data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top]{--tw-enter-translate-y:calc(2 * .25rem)}.nx\:data-\[state\=closed\]\:animate-out[data-state=closed]{--tw-exit-opacity:1;--tw-exit-scale:1;--tw-exit-translate-x:0;--tw-exit-translate-y:0;animation:.15s ease-in forwards nexus-exit}.nx\:data-\[state\=closed\]\:animate-accordion-up[data-state=closed]{animation:var(--nx-animate-accordion-up)}.nx\:data-\[state\=closed\]\:animate-out[data-state=closed]{animation:var(--nx-animate-out)}.nx\:data-\[state\=closed\]\:fade-out-0[data-state=closed]{--tw-exit-opacity:calc(1 - 0 / 100)}.nx\:data-\[state\=closed\]\:zoom-out-95[data-state=closed]{--tw-exit-scale:calc(95 / 100)}.nx\:data-\[state\=open\]\:animate-in[data-state=open]{--tw-enter-opacity:1;--tw-enter-scale:1;--tw-enter-translate-x:0;--tw-enter-translate-y:0;animation:.2s ease-out nexus-enter}.nx\:data-\[state\=open\]\:animate-accordion-down[data-state=open]{animation:var(--nx-animate-accordion-down)}.nx\:data-\[state\=open\]\:animate-in[data-state=open]{animation:var(--nx-animate-in)}.nx\:data-\[state\=open\]\:fade-in-0[data-state=open]{--tw-enter-opacity:calc(1 - 0 / 100)}.nx\:data-\[state\=open\]\:zoom-in-95[data-state=open]{--tw-enter-scale:calc(95 / 100)}@media (min-width:40rem){.nx\:sm\:min-h-auto{min-height:auto}.nx\:sm\:w-\[480px\]{width:480px}.nx\:sm\:w-full{width:100%}}.nx\:\[\&_\.modal-inner\]\:\[animation-direction\:reverse\] .modal-inner{animation-direction:reverse}.nx\:\[\&_\.modal-inner\]\:\[animation-direction\:var\(--modal-animation-direction\)\] .modal-inner{animation-direction:var(--modal-animation-direction)}.nx\:\[\&_\.modal-inner\]\:\[animation-duration\:var\(--modal-animation-duration\)\] .modal-inner{animation-duration:var(--modal-animation-duration)}.nx\:\[\&_\.modal-inner\]\:\[animation-fill-mode\:var\(--modal-animation-fill-mode\)\] .modal-inner{animation-fill-mode:var(--modal-animation-fill-mode)}.nx\:\[\&_\.modal-inner\]\:\[animation-name\:var\(--modal-animation-name\)\] .modal-inner{animation-name:var(--modal-animation-name)}.nx\:\[\&_\.modal-inner\]\:\[animation-timing-function\:var\(--modal-animation-timing-function\)\] .modal-inner{animation-timing-function:var(--modal-animation-timing-function)}.nx\:\[\&_button\]\:h-12 button{height:calc(var(--nx-spacing) * 12)}.nx\:\[\&_button\]\:flex-1 button{flex:1}.nx\:\[\&\:hover_\>_div\]\:\!\[animation-play-state\:paused\]:hover>div{animation-play-state:paused!important}.nx\:\[\&\>div\]\:contents>div{display:contents}.nx\:\[\&\>svg\]\:rotate-180>svg,.nx\:\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg{rotate:180deg}}.btn-palette-primary{--_btn-base:var(--nx-color-comp-btn-primary-base);--_btn-hover:var(--nx-color-comp-btn-primary-hover);--_btn-pressed:var(--nx-color-comp-btn-primary-pressed);--_btn-on:var(--nx-color-comp-btn-primary-on,var(--nx-color-static-white));--_btn-text:var(--nx-color-comp-btn-primary-text);--_btn-subtle-fill:var(--nx-color-comp-btn-primary-subtle-fill);--_btn-light-bg:var(--nx-color-comp-btn-primary-subtle-bg);--_btn-border:var(--nx-color-accent-primary-focus);--_btn-border-hover:var(--nx-color-accent-primary-focus);--_btn-outlined-bg:var(--nx-color-surface-default);--_btn-outlined-hover-bg:var(--nx-color-comp-btn-primary-subtle-bg);--_btn-outlined-pressed-bg:var(--nx-color-surface-default);--_btn-ghost-hover-bg:var(--nx-color-comp-btn-primary-subtle-bg);--_btn-ghost-pressed-bg:var(--nx-color-comp-btn-primary-subtle-fill)}.btn-palette-secondary{--_btn-base:var(--nx-color-comp-btn-secondary-base);--_btn-hover:var(--nx-color-comp-btn-secondary-hover);--_btn-pressed:var(--nx-color-comp-btn-secondary-pressed);--_btn-on:var(--nx-color-comp-btn-secondary-on,var(--nx-color-static-white));--_btn-text:var(--nx-color-comp-btn-secondary-text);--_btn-subtle-fill:var(--nx-color-comp-btn-secondary-subtle-fill);--_btn-light-bg:var(--nx-color-comp-btn-secondary-subtle-bg);--_btn-border:var(--nx-color-accent-secondary-focus);--_btn-border-hover:var(--nx-color-accent-secondary-focus);--_btn-outlined-bg:var(--nx-color-surface-default);--_btn-outlined-hover-bg:var(--nx-color-comp-btn-secondary-subtle-bg);--_btn-outlined-pressed-bg:var(--nx-color-surface-default);--_btn-ghost-hover-bg:var(--nx-color-comp-btn-secondary-subtle-bg);--_btn-ghost-pressed-bg:var(--nx-color-comp-btn-secondary-subtle-fill)}.btn-palette-normal{--_btn-base:var(--nx-color-comp-btn-normal-base);--_btn-hover:var(--nx-color-comp-btn-normal-hover);--_btn-pressed:var(--nx-color-comp-btn-normal-pressed);--_btn-on:var(--nx-color-comp-btn-normal-on,var(--nx-color-text-primary));--_btn-text:var(--nx-color-comp-btn-normal-text);--_btn-subtle-fill:var(--nx-color-comp-btn-normal-subtle-fill);--_btn-light-bg:var(--nx-color-comp-btn-normal-subtle-bg);--_btn-border:var(--nx-color-comp-btn-normal-border);--_btn-border-hover:var(--nx-color-comp-btn-normal-border-hover);--_btn-outlined-bg:var(--nx-color-surface-default);--_btn-outlined-hover-bg:var(--nx-color-comp-btn-normal-subtle-bg);--_btn-outlined-pressed-bg:var(--nx-color-surface-pressed);--_btn-ghost-hover-bg:var(--nx-color-comp-btn-normal-subtle-bg);--_btn-ghost-pressed-bg:var(--nx-color-surface-pressed)}.btn-palette-danger{--_btn-base:var(--nx-color-comp-btn-danger-base);--_btn-hover:var(--nx-color-comp-btn-danger-hover);--_btn-pressed:var(--nx-color-comp-btn-danger-pressed);--_btn-on:var(--nx-color-comp-btn-danger-on,var(--nx-color-static-white));--_btn-text:var(--nx-color-comp-btn-danger-text);--_btn-subtle-fill:var(--nx-color-comp-btn-danger-subtle-fill);--_btn-light-bg:var(--nx-color-comp-btn-danger-subtle-bg);--_btn-border:var(--nx-color-status-danger-focus);--_btn-border-hover:var(--nx-color-status-danger-focus);--_btn-outlined-bg:var(--nx-color-surface-default);--_btn-outlined-hover-bg:var(--nx-color-comp-btn-danger-subtle-bg);--_btn-outlined-pressed-bg:var(--nx-color-surface-default);--_btn-ghost-hover-bg:var(--nx-color-comp-btn-danger-subtle-bg);--_btn-ghost-pressed-bg:var(--nx-color-comp-btn-danger-subtle-fill)}@keyframes nexus-enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0), var(--tw-enter-translate-y,0), 0) scale3d(var(--tw-enter-scale,1), var(--tw-enter-scale,1), var(--tw-enter-scale,1))}}@keyframes nexus-exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0), var(--tw-exit-translate-y,0), 0) scale3d(var(--tw-exit-scale,1), var(--tw-exit-scale,1), var(--tw-exit-scale,1))}}@keyframes nexus-accordion-down{0%{height:0}to{height:var(--radix-accordion-content-height)}}@keyframes nexus-accordion-up{0%{height:var(--radix-accordion-content-height)}to{height:0}}@keyframes modal-fade{0%{opacity:0}to{opacity:1}}@keyframes modal-fade-in{0%{opacity:0}to{opacity:1}}@keyframes modal-scale{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes modal-small-scale{0%{transform:scale(.9)}to{transform:scale(1)}}@keyframes modal-pop-fade{0%{opacity:0;transform:scale(.95)}60%{opacity:1;transform:scale(1.03)}to{opacity:1;transform:scale(1)}}@keyframes modal-bottom-sheet{0%{transform:translateY(calc(100% + 60px))}to{transform:translateY(0)}}@keyframes modal-slide-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes modal-slide-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes modal-full-page{0%{opacity:.5;transform:translateY(60%)}to{opacity:1;transform:translateY(0)}}@keyframes modal-full-page-reverse{0%{opacity:.5;transform:translateY(-60%)}to{opacity:1;transform:translateY(0)}}@keyframes nexus-skeleton-shimmer{0%{background-position:300% 0}to{background-position:-300% 0}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}
+/*
+ * @nexus-cross/design-system — Pure CSS
+ *
+ * BEM 클래스 네이밍(.nexus-*)으로 CSS specificity 기반 동작.
+ * 소비자 CSS는 디자인 시스템 이후에 로드되므로 className으로 오버라이드 가능.
+ */
+
+/* ═══════════════════════════════════════════
+   Component Tokens (:root)
+   소비자가 :root에서 오버라이드 가능
+   ═══════════════════════════════════════════ */
+
+:root {
+  /* ── Button: Color ── */
+  --color-comp-btn-focus-ring: var(--color-accent-primary);
+
+  --color-comp-btn-primary-base: var(--color-accent-primary);
+  --color-comp-btn-primary-hover: var(--color-accent-primary-hover);
+  --color-comp-btn-primary-pressed: var(--color-accent-primary-pressed);
+  --color-comp-btn-primary-on: var(--color-accent-on-primary);
+  --color-comp-btn-primary-text: var(
+    --color-accent-primary-intense,
+    var(--color-accent-primary)
+  );
+  --color-comp-btn-primary-subtle-fill: var(--color-accent-primary-disabled);
+  --color-comp-btn-primary-subtle-bg: var(--color-accent-primary-bg);
+
+  --color-comp-btn-secondary-base: var(--color-accent-secondary);
+  --color-comp-btn-secondary-hover: var(--color-accent-secondary-hover);
+  --color-comp-btn-secondary-pressed: var(--color-accent-secondary-pressed);
+  --color-comp-btn-secondary-on: var(--color-accent-on-secondary);
+  --color-comp-btn-secondary-text: var(
+    --color-accent-secondary-intense,
+    var(--color-accent-secondary)
+  );
+  --color-comp-btn-secondary-subtle-fill: var(
+    --color-accent-secondary-disabled
+  );
+  --color-comp-btn-secondary-subtle-bg: var(--color-accent-secondary-bg);
+
+  --color-comp-btn-normal-base: var(--color-surface-subtle);
+  --color-comp-btn-normal-hover: var(--color-surface-subtle-hover);
+  --color-comp-btn-normal-pressed: var(--color-surface-subtle-hover);
+  --color-comp-btn-normal-on: var(--color-text-primary);
+  --color-comp-btn-normal-text: var(--color-text-primary);
+  --color-comp-btn-normal-subtle-fill: var(--color-surface-subtle);
+  --color-comp-btn-normal-subtle-bg: var(--color-surface-subtle-hover);
+  --color-comp-btn-normal-border: var(--color-border-default);
+  --color-comp-btn-normal-border-hover: var(
+    --color-border-default-hover,
+    var(--color-border-default)
+  );
+
+  --color-comp-btn-danger-base: var(--color-status-danger);
+  --color-comp-btn-danger-hover: var(--color-status-danger-hover);
+  --color-comp-btn-danger-pressed: var(--color-status-danger-pressed);
+  --color-comp-btn-danger-on: var(--color-static-white);
+  --color-comp-btn-danger-text: var(
+    --color-status-danger-intense,
+    var(--color-status-danger)
+  );
+  --color-comp-btn-danger-subtle-fill: var(--color-status-danger-disabled);
+  --color-comp-btn-danger-subtle-bg: var(--color-status-danger-bg);
+
+  /* ── Button: Radius ── */
+  --radius-comp-btn-xl: 0.75rem;
+  --radius-comp-btn-lg: 0.5rem;
+  --radius-comp-btn-md: 0.5rem;
+  --radius-comp-btn-sm: 0.25rem;
+
+  /* ── Button: Spacing ── */
+  --spacing-comp-btn-gap: var(--spacing-gap-sm, 0.5rem);
+  --spacing-comp-btn-xl-h: 3rem;
+  --spacing-comp-btn-xl-px: var(--spacing-padding-lg, 1.5rem);
+  --spacing-comp-btn-lg-h: 2.5rem;
+  --spacing-comp-btn-lg-px: var(--spacing-padding-lg, 1.5rem);
+  --spacing-comp-btn-md-h: 1.875rem;
+  --spacing-comp-btn-md-px: var(--spacing-padding-sm, 0.75rem);
+  --spacing-comp-btn-sm-px: var(--spacing-padding-xs, 0.5rem);
+  --spacing-comp-btn-sm-py: var(--spacing-padding-2xs, 0.25rem);
+
+  /* ── Button: Font ── */
+  --text-comp-btn-xl: var(--text-text-base, 1rem);
+  --text-comp-btn-lg: var(--text-text-base, 1rem);
+  --text-comp-btn-md: var(--text-text-sm, 0.875rem);
+  --text-comp-btn-sm: var(--text-text-xs, 0.75rem);
+
+  /* ── Button: Misc ── */
+  --shadow-comp-btn: none;
+  --opacity-comp-btn-disabled: 0.5;
+
+  /* ── Shared: Shadow ── */
+  --shadow-comp-sm: var(--shadow-elevation-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+  --shadow-comp-md: var(--shadow-elevation-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
+  --shadow-comp-lg: var(
+    --shadow-elevation-lg,
+    0 10px 15px -3px rgb(0 0 0 / 0.1)
+  );
+
+  /* ── Shared: Overlay ── */
+  --color-comp-overlay: var(--color-overlay-dim, rgba(0, 0, 0, 0.6));
+
+  /* ── ErrorBoundary ── */
+  --color-comp-error-border: var(--color-status-danger);
+  --color-comp-error-bg: var(--color-status-danger-bg, #fef2f2);
+  --color-comp-error-text: var(--color-status-danger-intense, #991b1b);
+}
+
+/* ═══════════════════════════════════════════
+   컴포넌트 스타일
+   ═══════════════════════════════════════════ */
+
+/* ─── Shared: sr-only ─── */
+.nexus-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* ═══════════════════════════════════════════
+     Button
+     ═══════════════════════════════════════════ */
+
+.nexus-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-comp-btn-gap);
+  white-space: nowrap;
+  user-select: none;
+  box-shadow: var(--shadow-comp-btn);
+  transition-property: color, background-color, border-color;
+  transition-duration: 200ms;
+  border: none;
+  background: none;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  padding: 0;
+  margin: 0;
+  text-decoration: none;
+}
+.nexus-btn:disabled,
+.nexus-btn[aria-disabled='true'] {
+  pointer-events: none;
+  opacity: var(--opacity-comp-btn-disabled);
+}
+.nexus-btn:focus-visible {
+  outline: 2px solid
+    color-mix(in srgb, var(--color-comp-btn-focus-ring) 50%, transparent);
+  outline-offset: 2px;
+}
+
+/* Variant: contained */
+.nexus-btn--contained {
+  background: var(--_btn-base);
+  color: var(--_btn-on);
+}
+.nexus-btn--contained:hover {
+  background: var(--_btn-hover);
+}
+.nexus-btn--contained:active {
+  background: var(--_btn-pressed);
+}
+
+/* Variant: outlined */
+.nexus-btn--outlined {
+  border: 1px solid var(--_btn-border);
+  color: var(--_btn-text);
+  background: var(--_btn-outlined-bg);
+}
+.nexus-btn--outlined:hover {
+  background: var(--_btn-outlined-hover-bg);
+  border-color: var(--_btn-border-hover);
+}
+.nexus-btn--outlined:active {
+  background: var(--_btn-outlined-pressed-bg);
+  border-color: var(--_btn-border-hover);
+}
+
+/* Variant: subtle */
+.nexus-btn--subtle {
+  background: var(--_btn-subtle-fill);
+  color: var(--_btn-text);
+}
+.nexus-btn--subtle:hover {
+  background: var(--_btn-light-bg);
+}
+.nexus-btn--subtle:active {
+  background: var(--_btn-light-bg);
+}
+
+/* Variant: ghost */
+.nexus-btn--ghost {
+  background: transparent;
+  color: var(--_btn-text);
+}
+.nexus-btn--ghost:hover {
+  background: var(--_btn-ghost-hover-bg);
+}
+.nexus-btn--ghost:active {
+  background: var(--_btn-ghost-pressed-bg);
+}
+
+/* Sizes */
+.nexus-btn--xl {
+  height: var(--spacing-comp-btn-xl-h);
+  padding-inline: var(--spacing-comp-btn-xl-px);
+  font-size: var(--text-comp-btn-xl);
+  font-weight: 600;
+  border-radius: var(--radius-comp-btn-xl);
+}
+.nexus-btn--lg {
+  height: var(--spacing-comp-btn-lg-h);
+  padding-inline: var(--spacing-comp-btn-lg-px);
+  font-size: var(--text-comp-btn-lg);
+  font-weight: 600;
+  border-radius: var(--radius-comp-btn-lg);
+}
+.nexus-btn--md {
+  height: var(--spacing-comp-btn-md-h);
+  padding-inline: var(--spacing-comp-btn-md-px);
+  font-size: var(--text-comp-btn-md);
+  font-weight: 500;
+  border-radius: var(--radius-comp-btn-md);
+}
+.nexus-btn--sm {
+  padding-inline: var(--spacing-comp-btn-sm-px);
+  padding-block: var(--spacing-comp-btn-sm-py);
+  font-size: var(--text-comp-btn-sm);
+  font-weight: 500;
+  border-radius: var(--radius-comp-btn-sm);
+}
+
+/* Radius override */
+.nexus-btn--circle {
+  border-radius: 9999px !important;
+}
+
+/* Semantic palette — compound selectors (cascade 방지) */
+.nexus-btn--primary {
+  --_btn-base: var(--color-comp-btn-primary-base);
+  --_btn-hover: var(--color-comp-btn-primary-hover);
+  --_btn-pressed: var(--color-comp-btn-primary-pressed);
+  --_btn-on: var(--color-comp-btn-primary-on);
+  --_btn-text: var(--color-comp-btn-primary-text);
+  --_btn-subtle-fill: var(--color-comp-btn-primary-subtle-fill);
+  --_btn-light-bg: var(--color-comp-btn-primary-subtle-bg);
+  --_btn-border: var(--color-accent-primary-focus, var(--color-accent-primary));
+  --_btn-border-hover: var(
+    --color-accent-primary-focus,
+    var(--color-accent-primary)
+  );
+  --_btn-outlined-bg: var(--color-surface-default);
+  --_btn-outlined-hover-bg: var(--color-comp-btn-primary-subtle-bg);
+  --_btn-outlined-pressed-bg: var(--color-surface-default);
+  --_btn-ghost-hover-bg: var(--color-comp-btn-primary-subtle-bg);
+  --_btn-ghost-pressed-bg: var(--color-comp-btn-primary-subtle-fill);
+}
+.nexus-btn--secondary {
+  --_btn-base: var(--color-comp-btn-secondary-base);
+  --_btn-hover: var(--color-comp-btn-secondary-hover);
+  --_btn-pressed: var(--color-comp-btn-secondary-pressed);
+  --_btn-on: var(--color-comp-btn-secondary-on);
+  --_btn-text: var(--color-comp-btn-secondary-text);
+  --_btn-subtle-fill: var(--color-comp-btn-secondary-subtle-fill);
+  --_btn-light-bg: var(--color-comp-btn-secondary-subtle-bg);
+  --_btn-border: var(
+    --color-accent-secondary-focus,
+    var(--color-accent-secondary)
+  );
+  --_btn-border-hover: var(
+    --color-accent-secondary-focus,
+    var(--color-accent-secondary)
+  );
+  --_btn-outlined-bg: var(--color-surface-default);
+  --_btn-outlined-hover-bg: var(--color-comp-btn-secondary-subtle-bg);
+  --_btn-outlined-pressed-bg: var(--color-surface-default);
+  --_btn-ghost-hover-bg: var(--color-comp-btn-secondary-subtle-bg);
+  --_btn-ghost-pressed-bg: var(--color-comp-btn-secondary-subtle-fill);
+}
+.nexus-btn--normal {
+  --_btn-base: var(--color-comp-btn-normal-base);
+  --_btn-hover: var(--color-comp-btn-normal-hover);
+  --_btn-pressed: var(--color-comp-btn-normal-pressed);
+  --_btn-on: var(--color-comp-btn-normal-on);
+  --_btn-text: var(--color-comp-btn-normal-text);
+  --_btn-subtle-fill: var(--color-comp-btn-normal-subtle-fill);
+  --_btn-light-bg: var(--color-comp-btn-normal-subtle-bg);
+  --_btn-border: var(--color-comp-btn-normal-border);
+  --_btn-border-hover: var(--color-comp-btn-normal-border-hover);
+  --_btn-outlined-bg: var(--color-surface-default);
+  --_btn-outlined-hover-bg: var(--color-comp-btn-normal-subtle-bg);
+  --_btn-outlined-pressed-bg: var(
+    --color-surface-pressed,
+    var(--color-surface-strong)
+  );
+  --_btn-ghost-hover-bg: var(--color-comp-btn-normal-subtle-bg);
+  --_btn-ghost-pressed-bg: var(
+    --color-surface-pressed,
+    var(--color-surface-strong)
+  );
+}
+.nexus-btn--danger {
+  --_btn-base: var(--color-comp-btn-danger-base);
+  --_btn-hover: var(--color-comp-btn-danger-hover);
+  --_btn-pressed: var(--color-comp-btn-danger-pressed);
+  --_btn-on: var(--color-comp-btn-danger-on);
+  --_btn-text: var(--color-comp-btn-danger-text);
+  --_btn-subtle-fill: var(--color-comp-btn-danger-subtle-fill);
+  --_btn-light-bg: var(--color-comp-btn-danger-subtle-bg);
+  --_btn-border: var(--color-status-danger-focus, var(--color-status-danger));
+  --_btn-border-hover: var(
+    --color-status-danger-focus,
+    var(--color-status-danger)
+  );
+  --_btn-outlined-bg: var(--color-surface-default);
+  --_btn-outlined-hover-bg: var(--color-comp-btn-danger-subtle-bg);
+  --_btn-outlined-pressed-bg: var(--color-surface-default);
+  --_btn-ghost-hover-bg: var(--color-comp-btn-danger-subtle-bg);
+  --_btn-ghost-pressed-bg: var(--color-comp-btn-danger-subtle-fill);
+}
+
+/* ═══════════════════════════════════════════
+     TextInput
+     ═══════════════════════════════════════════ */
+
+/* ── Field wrapper ── */
+.nexus-text-input-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.nexus-text-input-field__label {
+  font-size: var(--text-text-sm, 0.875rem);
+  font-weight: 600;
+  color: var(--color-text-muted);
+  line-height: 1;
+}
+.nexus-text-input-field__footer {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.nexus-text-input-field__description {
+  font-size: var(--text-text-xs, 0.75rem);
+  color: var(--color-text-muted);
+  line-height: 1.5;
+  letter-spacing: -0.12px;
+}
+.nexus-text-input-field__description--error {
+  color: var(--color-status-danger);
+}
+.nexus-text-input-field__count {
+  font-size: var(--text-text-xs, 0.75rem);
+  color: var(--color-text-muted);
+  margin-left: auto;
+  flex-shrink: 0;
+}
+.nexus-text-input-field__count--error {
+  color: var(--color-status-danger);
+}
+
+/* ── Input box ── */
+.nexus-text-input {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: var(--radius-corner-md, 0.5rem);
+  border: 1px solid var(--color-border-default);
+  background: var(--color-surface-default);
+  font-size: var(--text-text-sm, 0.875rem);
+  font-weight: 500;
+  line-height: 1;
+  color: var(--color-text-primary);
+  transition:
+    border-color 200ms,
+    box-shadow 200ms;
+}
+:where(.nexus-text-input) {
+  width: 100%;
+}
+.nexus-text-input:hover:not(.nexus-text-input--disabled):not(:focus-within) {
+  border-color: var(--color-border-default-hover);
+  box-shadow: 0 0 0 0.5px var(--color-border-default-hover);
+}
+.nexus-text-input--default:focus-within {
+  border-color: var(--color-accent-primary);
+  box-shadow: 0 0 0 0.5px var(--color-accent-primary);
+}
+.nexus-text-input--error {
+  border-color: var(--color-status-danger);
+}
+.nexus-text-input--error:focus-within {
+  border-color: var(--color-status-danger);
+  box-shadow: 0 0 0 0.5px var(--color-status-danger);
+}
+.nexus-text-input--disabled {
+  cursor: not-allowed;
+  background: var(--color-surface-strong);
+  border-color: var(--color-border-medium);
+  color: var(--color-text-muted);
+}
+
+/* ── Sizes ── */
+.nexus-text-input--xl {
+  padding: calc(var(--spacing-padding-md, 1rem) - 1px)
+    var(--spacing-padding-md, 1rem);
+  font-size: var(--text-text-base, 1rem);
+}
+.nexus-text-input--lg {
+  padding: calc(var(--spacing-padding-sm, 0.75rem) - 1px)
+    var(--spacing-padding-sm, 0.75rem);
+  font-size: var(--text-text-base, 1rem);
+}
+.nexus-text-input--md {
+  padding: calc(var(--spacing-padding-xs, 0.5rem) - 1px)
+    var(--spacing-padding-sm, 0.75rem);
+  font-size: var(--text-text-sm, 0.875rem);
+}
+
+/* ── Inner elements ── */
+.nexus-text-input__inner {
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: inherit;
+  font: inherit;
+}
+.nexus-text-input__inner:focus-visible {
+  outline: none;
+}
+.nexus-text-input__inner::placeholder {
+  color: var(--color-text-muted);
+}
+.nexus-text-input__icon {
+  display: flex;
+  flex-shrink: 0;
+  color: var(--color-text-muted);
+}
+.nexus-text-input__clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+  border: none;
+  background: transparent;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  padding: 0;
+  transition: color 150ms;
+}
+.nexus-text-input__clear:hover {
+  color: var(--color-icon-tertiary-hover);
+  background: transparent;
+}
+
+/* ═══════════════════════════════════════════
+     PriceInput
+     ═══════════════════════════════════════════ */
+
+/* ── Field wrapper ── */
+.nexus-price-input-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.nexus-price-input-field__header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+.nexus-price-input-field__label {
+  font-size: var(--text-text-sm, 0.875rem);
+  font-weight: 600;
+  color: var(--color-text-tertiary);
+  line-height: 1;
+}
+.nexus-price-input-field__balance {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.375rem;
+  margin-left: auto;
+  padding: 0;
+  border: none;
+  background: transparent;
+  font-size: var(--text-text-xs, 0.75rem);
+  font-weight: 400;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  line-height: 1.5;
+  letter-spacing: -0.12px;
+  transition: color 150ms;
+}
+.nexus-price-input-field__balance:hover {
+  color: var(--color-text-tertiary);
+}
+.nexus-price-input-field__balance:disabled {
+  cursor: not-allowed;
+  opacity: var(--opacity-disabled-text, 0.5);
+}
+.nexus-price-input-field__balance-value {
+  font-weight: 400;
+  color: var(--color-text-secondary);
+  text-decoration: underline;
+  transition: color 150ms;
+}
+.nexus-price-input-field__balance:hover
+  .nexus-price-input-field__balance-value {
+  color: var(--color-text-primary);
+}
+.nexus-price-input-field__balance-value--exceeded {
+  color: var(--color-status-danger);
+}
+.nexus-price-input-field__balance:hover
+  .nexus-price-input-field__balance-value--exceeded {
+  color: var(--color-status-danger);
+}
+.nexus-price-input-field__description {
+  font-size: var(--text-text-xs, 0.75rem);
+  color: var(--color-text-tertiary);
+  line-height: 1.5;
+  letter-spacing: -0.12px;
+}
+.nexus-price-input-field__description--error {
+  color: var(--color-status-danger);
+}
+
+/* ── Input box ── */
+.nexus-price-input {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: var(--radius-corner-md, 0.5rem);
+  border: 1px solid var(--color-border-default);
+  background: var(--color-surface-default);
+  font-size: var(--text-text-sm, 0.875rem);
+  font-weight: 500;
+  line-height: 1;
+  color: var(--color-text-primary);
+  transition:
+    border-color 200ms,
+    box-shadow 200ms;
+}
+:where(.nexus-price-input) {
+  width: 100%;
+}
+.nexus-price-input:hover:not(.nexus-price-input--disabled):not(:focus-within) {
+  border-color: var(--color-border-default-hover);
+  box-shadow: 0 0 0 0.5px var(--color-border-default-hover);
+}
+.nexus-price-input--default:focus-within {
+  border-color: var(--color-accent-primary);
+  box-shadow: 0 0 0 0.5px var(--color-accent-primary);
+}
+.nexus-price-input--error {
+  border-color: var(--color-status-danger);
+}
+.nexus-price-input--error:focus-within {
+  border-color: var(--color-status-danger);
+  box-shadow: 0 0 0 0.5px var(--color-status-danger);
+}
+.nexus-price-input--disabled {
+  cursor: not-allowed;
+  background: var(--color-surface-strong);
+  border-color: var(--color-border-medium);
+  color: var(--color-text-muted);
+}
+
+/* ── Sizes ── */
+.nexus-price-input--xl {
+  padding: calc(var(--spacing-padding-md, 1rem) - 1px)
+    var(--spacing-padding-md, 1rem);
+  font-size: var(--text-text-base, 1rem);
+}
+.nexus-price-input--lg {
+  padding: calc(var(--spacing-padding-sm, 0.75rem) - 1px)
+    var(--spacing-padding-sm, 0.75rem);
+  font-size: var(--text-text-base, 1rem);
+}
+.nexus-price-input--md {
+  padding: calc(var(--spacing-padding-xs, 0.5rem) - 1px)
+    var(--spacing-padding-sm, 0.75rem);
+  font-size: var(--text-text-sm, 0.875rem);
+}
+
+/* ── Inner elements ── */
+.nexus-price-input__prefix {
+  flex-shrink: 0;
+  color: var(--color-text-secondary);
+  font: inherit;
+  user-select: none;
+}
+.nexus-price-input__suffix {
+  flex-shrink: 0;
+  color: var(--color-text-secondary);
+  font: inherit;
+  white-space: nowrap;
+  user-select: none;
+}
+.nexus-price-input__inner {
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: inherit;
+  font: inherit;
+}
+.nexus-price-input__inner:focus-visible {
+  outline: none;
+}
+.nexus-price-input__inner::placeholder {
+  color: var(--color-text-muted);
+}
+.nexus-price-input__inner--right {
+  text-align: right;
+}
+
+/* ═══════════════════════════════════════════
+     TextArea
+     ═══════════════════════════════════════════ */
+
+/* ── Field wrapper ── */
+.nexus-textarea-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.nexus-textarea-field__label {
+  font-size: var(--text-label-semibold-md, 0.875rem);
+  font-weight: 600;
+  color: var(--color-text-tertiary);
+  line-height: 1;
+}
+.nexus-textarea-field__footer {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.nexus-textarea-field__description {
+  flex: 1;
+  min-width: 0;
+  font-size: var(--text-text-xs, 0.75rem);
+  color: var(--color-text-tertiary);
+  line-height: 1.5;
+  letter-spacing: -0.12px;
+}
+.nexus-textarea-field__description--error {
+  color: var(--color-status-danger-intense, #d20625);
+}
+.nexus-textarea-field__count {
+  font-size: var(--text-text-xs, 0.75rem);
+  color: var(--color-text-tertiary);
+  line-height: 1.5;
+  letter-spacing: -0.12px;
+  text-align: right;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+.nexus-textarea-field__count--error {
+  color: var(--color-status-danger-intense, #d20625);
+}
+
+/* ── Textarea box ── */
+.nexus-textarea {
+  border-radius: var(--radius-corner-md, 0.5rem);
+  border: 1px solid var(--color-border-default);
+  background: var(--color-surface-default);
+  color: var(--color-text-primary);
+  font-weight: 500;
+  line-height: 1.5;
+  transition:
+    border-color 200ms,
+    box-shadow 200ms;
+  resize: none;
+  min-height: 100px;
+  padding: var(--spacing-padding-sm, 0.75rem);
+}
+:where(.nexus-textarea) {
+  width: 100%;
+}
+.nexus-textarea::placeholder {
+  color: var(--color-text-muted);
+}
+.nexus-textarea:focus-visible {
+  outline: none;
+}
+
+/* Hover */
+.nexus-textarea:hover:not(.nexus-textarea--disabled):not(:focus) {
+  border-color: var(--color-border-default-hover);
+  box-shadow: 0 0 0 0.5px var(--color-border-default-hover);
+}
+
+/* Focus — default */
+.nexus-textarea--default:focus {
+  border-color: var(--color-accent-primary);
+  box-shadow: 0 0 0 0.5px var(--color-accent-primary);
+}
+
+/* Error */
+.nexus-textarea--error {
+  border-color: var(--color-status-danger-focus, #e62848);
+  box-shadow: 0 0 0 0.5px var(--color-status-danger-focus, #e62848);
+}
+.nexus-textarea--error:focus {
+  border-color: var(--color-status-danger-focus, #e62848);
+  box-shadow: 0 0 0 0.5px var(--color-status-danger-focus, #e62848);
+}
+
+/* Disabled */
+.nexus-textarea--disabled {
+  cursor: not-allowed;
+  background: var(
+    --color-surface-default-disabled,
+    var(--color-surface-strong)
+  );
+  border-color: var(--color-border-medium);
+  color: var(--color-text-muted);
+}
+
+/* ── Sizes ── */
+.nexus-textarea--lg {
+  font-size: var(--text-text-medium-base, 1rem);
+  letter-spacing: -0.16px;
+}
+.nexus-textarea--md {
+  font-size: var(--text-text-medium-sm, 0.875rem);
+  letter-spacing: -0.14px;
+}
+
+/* ── Resize modes ── */
+.nexus-textarea--resize-default {
+  resize: vertical;
+}
+.nexus-textarea--resize-auto {
+  resize: none;
+  overflow: hidden;
+}
+
+/* ── Custom scrollbar ── */
+.nexus-textarea:not(.nexus-textarea--resize-auto) {
+  overflow-y: auto;
+}
+.nexus-textarea::-webkit-scrollbar {
+  width: 5px;
+}
+.nexus-textarea::-webkit-scrollbar-track {
+  background: transparent;
+}
+.nexus-textarea::-webkit-scrollbar-thumb {
+  background: var(--color-icon-muted, #c6d0da);
+  border-radius: var(--radius-corner-full, 9999px);
+}
+
+/* ═══════════════════════════════════════════
+     NumberInput
+     ═══════════════════════════════════════════ */
+
+.nexus-number-input {
+  display: flex;
+  align-items: center;
+  border-radius: var(--radius-corner-md, 0.375rem);
+  border: 1px solid var(--color-border-default);
+  background: var(--color-surface-default);
+  color: var(--color-text-primary);
+  transition:
+    border-color 200ms,
+    box-shadow 200ms;
+}
+:where(.nexus-number-input) {
+  width: 100%;
+}
+.nexus-number-input:hover:not(.nexus-number-input--disabled):not(
+    :focus-within
+  ) {
+  box-shadow: 0 0 0 0.5px var(--color-border-default);
+}
+.nexus-number-input--default:focus-within {
+  border-color: var(--color-accent-primary);
+  box-shadow: 0 0 0 0.5px var(--color-accent-primary);
+}
+.nexus-number-input--error {
+  border-color: var(--color-status-danger);
+}
+.nexus-number-input--error:focus-within {
+  border-color: var(--color-status-danger);
+  box-shadow: 0 0 0 0.5px var(--color-status-danger);
+}
+.nexus-number-input--xl {
+  height: 3.5rem;
+  font-size: var(--text-text-base, 1rem);
+}
+.nexus-number-input--lg {
+  height: 3rem;
+  font-size: var(--text-text-base, 1rem);
+}
+.nexus-number-input--md {
+  height: 2.5rem;
+  font-size: var(--text-text-sm, 0.875rem);
+}
+.nexus-number-input--sm {
+  height: 2rem;
+  font-size: var(--text-text-xs, 0.75rem);
+}
+.nexus-number-input--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.nexus-number-input__field {
+  height: 100%;
+  width: 100%;
+  min-width: 0;
+  flex: 1;
+  padding: 0;
+  border: none;
+  background: transparent;
+  outline: none;
+  font: inherit;
+  color: inherit;
+}
+.nexus-number-input__field::placeholder {
+  color: var(--color-text-tertiary);
+}
+.nexus-number-input__field:focus-visible {
+  outline: none;
+}
+.nexus-number-input__field--xl {
+  padding-inline: var(--spacing-padding-lg, 1.25rem);
+}
+.nexus-number-input__field--lg {
+  padding-inline: var(--spacing-padding-md, 1rem);
+}
+.nexus-number-input__field--md {
+  padding-inline: var(--spacing-padding-sm, 0.75rem);
+}
+.nexus-number-input__field--sm {
+  padding-inline: 0.625rem;
+}
+.nexus-number-input__buttons {
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid var(--color-border-default);
+  height: 100%;
+  flex-shrink: 0;
+}
+.nexus-number-input__step {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  padding-inline: 0.375rem;
+  margin: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+  color: var(--color-text-tertiary);
+  transition-property: color, background-color;
+  transition-duration: 150ms;
+}
+.nexus-number-input__step:hover {
+  color: var(--color-text-primary);
+  background: var(--color-surface-hover);
+}
+.nexus-number-input__step:disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}
+.nexus-number-input__step--up {
+  border-top-right-radius: var(--radius-corner-md, 0.375rem);
+  border-bottom: 1px solid var(--color-border-default);
+}
+.nexus-number-input__step--down {
+  border-bottom-right-radius: var(--radius-corner-md, 0.375rem);
+}
+.nexus-number-input__step-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+/* ═══════════════════════════════════════════
+     Divider
+     ═══════════════════════════════════════════ */
+
+.nexus-divider {
+  flex-shrink: 0;
+  border-color: var(--color-border-default);
+}
+.nexus-divider--horizontal {
+  width: 100%;
+  border-top-width: 1px;
+}
+.nexus-divider--vertical {
+  align-self: stretch;
+  border-left-width: 1px;
+}
+.nexus-divider--solid {
+  border-style: solid;
+}
+.nexus-divider--dashed {
+  border-style: dashed;
+}
+.nexus-divider--dotted {
+  border-style: dotted;
+}
+
+/* ═══════════════════════════════════════════
+     Avatar
+     ═══════════════════════════════════════════ */
+
+.nexus-avatar {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background: var(--color-surface-hover);
+  color: var(--color-text-tertiary);
+}
+.nexus-avatar--xs {
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: 10px;
+}
+.nexus-avatar--sm {
+  width: 2rem;
+  height: 2rem;
+  font-size: var(--text-text-xs, 0.75rem);
+}
+.nexus-avatar--md {
+  width: 2.5rem;
+  height: 2.5rem;
+  font-size: var(--text-text-sm, 0.875rem);
+}
+.nexus-avatar--lg {
+  width: 3rem;
+  height: 3rem;
+  font-size: var(--text-text-base, 1rem);
+}
+.nexus-avatar--xl {
+  width: 4rem;
+  height: 4rem;
+  font-size: var(--text-text-lg, 1.125rem);
+}
+.nexus-avatar--circle {
+  border-radius: 9999px;
+}
+.nexus-avatar--square {
+  border-radius: var(--radius-corner-md, 0.375rem);
+}
+.nexus-avatar__icon--xs {
+  width: 1rem;
+  height: 1rem;
+}
+.nexus-avatar__icon--sm {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.nexus-avatar__icon--md {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.nexus-avatar__icon--lg {
+  width: 2rem;
+  height: 2rem;
+}
+.nexus-avatar__icon--xl {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+.nexus-avatar__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* ═══════════════════════════════════════════
+     Switch
+     ═══════════════════════════════════════════ */
+
+.nexus-switch {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  cursor: pointer;
+  border-radius: 9999px;
+  transition-property: background-color;
+  transition-duration: 200ms;
+  border: 2px solid transparent;
+}
+.nexus-switch:has(input:disabled) {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.nexus-switch--sm {
+  height: 1.25rem;
+  width: 2.25rem;
+}
+.nexus-switch--md {
+  height: 1.5rem;
+  width: 2.75rem;
+}
+.nexus-switch--checked {
+  background: var(--color-accent-primary);
+}
+.nexus-switch--unchecked {
+  background: var(--color-border-default);
+}
+.nexus-switch__thumb {
+  pointer-events: none;
+  display: block;
+  border-radius: 9999px;
+  background: var(--color-static-white);
+  box-shadow: var(--shadow-comp-sm);
+  transition-property: transform;
+  transition-duration: 200ms;
+}
+.nexus-switch__thumb--sm {
+  width: 1rem;
+  height: 1rem;
+}
+.nexus-switch__thumb--md {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.nexus-switch__thumb--sm-on {
+  transform: translateX(1rem);
+}
+.nexus-switch__thumb--md-on {
+  transform: translateX(1.25rem);
+}
+.nexus-switch__thumb--off {
+  transform: translateX(0);
+}
+
+/* ═══════════════════════════════════════════
+     CheckBox
+     ═══════════════════════════════════════════ */
+
+.nexus-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-gap-sm, 0.5rem);
+  user-select: none;
+}
+.nexus-checkbox--sm {
+  font-size: var(--text-text-xs, 0.75rem);
+}
+.nexus-checkbox--md {
+  font-size: var(--text-text-sm, 0.875rem);
+}
+.nexus-checkbox--pointer {
+  cursor: pointer;
+}
+.nexus-checkbox--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.nexus-checkbox__box {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--color-border-default);
+  transition-property: border-color, background-color;
+  transition-duration: 150ms;
+}
+.nexus-checkbox__box:has(~ .nexus-sr-only:disabled) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.nexus-checkbox__box--sm {
+  width: 1rem;
+  height: 1rem;
+}
+.nexus-checkbox__box--md {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.nexus-checkbox__box--square {
+  border-radius: var(--radius-corner-sm, 0.25rem);
+}
+.nexus-checkbox__box--round {
+  border-radius: 9999px;
+}
+.nexus-checkbox__box--checked {
+  border-color: var(--color-accent-primary);
+  background: var(--color-accent-primary);
+  color: var(--color-static-white);
+}
+.nexus-checkbox__box--unchecked {
+  border-color: var(--color-border-default);
+  background: var(--color-surface-default);
+}
+.nexus-checkbox__icon--sm {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+.nexus-checkbox__icon--md {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+.nexus-checkbox__label {
+  color: var(--color-text-primary);
+}
+
+/* ═══════════════════════════════════════════
+     RadioGroup
+     ═══════════════════════════════════════════ */
+
+.nexus-radio-group {
+  display: flex;
+}
+.nexus-radio-group--horizontal {
+  flex-direction: row;
+  gap: var(--spacing-gap-lg, 1rem);
+}
+.nexus-radio-group--vertical {
+  flex-direction: column;
+  gap: var(--spacing-gap-sm, 0.5rem);
+}
+.nexus-radio-item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-gap-sm, 0.5rem);
+  user-select: none;
+}
+.nexus-radio-item--sm {
+  font-size: var(--text-text-xs, 0.75rem);
+}
+.nexus-radio-item--md {
+  font-size: var(--text-text-sm, 0.875rem);
+}
+.nexus-radio-item--pointer {
+  cursor: pointer;
+}
+.nexus-radio-item--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.nexus-radio__circle {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  border: 1px solid var(--color-border-default);
+  transition-property: border-color;
+  transition-duration: 150ms;
+}
+.nexus-radio__circle:has(~ .nexus-sr-only:disabled) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.nexus-radio__circle--sm {
+  width: 1rem;
+  height: 1rem;
+}
+.nexus-radio__circle--md {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.nexus-radio__circle--checked {
+  border-color: var(--color-accent-primary);
+  color: var(--color-accent-primary);
+}
+.nexus-radio__circle--unchecked {
+  border-color: var(--color-border-default);
+  background: var(--color-surface-default);
+}
+.nexus-radio__dot {
+  border-radius: 9999px;
+  background: currentColor;
+}
+.nexus-radio__dot--sm {
+  width: 0.375rem;
+  height: 0.375rem;
+}
+.nexus-radio__dot--md {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+.nexus-radio__label {
+  color: var(--color-text-primary);
+}
+
+/* ═══════════════════════════════════════════
+     Chip
+     ═══════════════════════════════════════════ */
+
+.nexus-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  white-space: nowrap;
+  font-weight: 500;
+  transition-property: color, background-color, border-color;
+  transition-duration: 150ms;
+  user-select: none;
+  border-radius: 9999px;
+  border: 1px solid transparent;
+  background: transparent;
+  cursor: pointer;
+  font-family: inherit;
+  padding: 0;
+  margin: 0;
+  text-decoration: none;
+}
+.nexus-chip[aria-disabled='true'] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.nexus-chip--default {
+  border-color: var(--color-border-default);
+  background: var(--color-surface-default);
+  color: var(--color-text-primary);
+}
+.nexus-chip--filled {
+  border-color: transparent;
+  background: var(--color-surface-hover);
+  color: var(--color-text-primary);
+}
+.nexus-chip--outline {
+  border-color: var(--color-border-default);
+  background: transparent;
+  color: var(--color-text-primary);
+}
+.nexus-chip--accent {
+  border-color: transparent;
+  background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent);
+  color: var(--color-accent-primary);
+}
+.nexus-chip--sm {
+  height: 1.5rem;
+  padding-inline: var(--spacing-padding-xs, 0.5rem);
+  font-size: var(--text-text-xs, 0.75rem);
+}
+.nexus-chip--md {
+  height: 1.75rem;
+  padding-inline: 0.625rem;
+  font-size: var(--text-text-xs, 0.75rem);
+}
+.nexus-chip--lg {
+  height: 2rem;
+  padding-inline: var(--spacing-padding-sm, 0.75rem);
+  font-size: var(--text-text-sm, 0.875rem);
+}
+.nexus-chip__close {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  padding: 0.125rem;
+  opacity: 0.6;
+  transition-property: opacity;
+  transition-duration: 150ms;
+}
+.nexus-chip__close:hover {
+  opacity: 1;
+}
+.nexus-chip__close-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+/* ═══════════════════════════════════════════
+     Badge
+     ═══════════════════════════════════════════ */
+
+.nexus-badge-wrapper {
+  position: relative;
+}
+.nexus-badge {
+  --nexus-badge-offset-x: 0px;
+  --nexus-badge-offset-y: 0px;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 0.35rem;
+  border-radius: var(--radius-corner-full, 9999px);
+  font-size: var(--text-text-xs, 0.75rem);
+  font-weight: var(--font-weight-label-semibold-sm, 600);
+  line-height: 1;
+  color: var(--color-text-inverted);
+}
+.nexus-badge--positioned {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1;
+  transform: translate(
+    calc(50% + var(--nexus-badge-offset-x)),
+    calc(-50% + var(--nexus-badge-offset-y))
+  );
+}
+.nexus-badge--dot {
+  min-width: 0;
+  padding: 0;
+}
+.nexus-badge--dot.nexus-badge--sm {
+  width: 0.375rem;
+  height: 0.375rem;
+}
+.nexus-badge--dot.nexus-badge--md {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+.nexus-badge--dot.nexus-badge--lg {
+  width: 0.625rem;
+  height: 0.625rem;
+}
+.nexus-badge--danger {
+  background: var(--color-status-danger);
+  color: var(--color-static-white);
+}
+.nexus-badge--primary {
+  background: var(--color-accent-primary);
+  color: var(--color-accent-on-primary);
+}
+.nexus-badge--secondary {
+  background: var(--color-accent-secondary);
+  color: var(--color-accent-on-secondary);
+}
+.nexus-badge--info {
+  background: var(--color-status-info);
+  color: var(--color-static-white);
+}
+.nexus-badge--success {
+  background: var(--color-status-success);
+  color: var(--color-static-white);
+}
+.nexus-badge--warning {
+  background: var(--color-status-warning);
+  color: var(--color-static-black);
+}
+.nexus-badge--sm:not(.nexus-badge--dot) {
+  min-width: 1rem;
+  height: 1rem;
+  padding: 0 0.25rem;
+  font-size: 0.625rem;
+}
+.nexus-badge--lg:not(.nexus-badge--dot) {
+  min-width: 1.5rem;
+  height: 1.5rem;
+  padding: 0 0.45rem;
+  font-size: var(--text-text-sm, 0.875rem);
+}
+
+/* ═══════════════════════════════════════════
+     Progress
+     ═══════════════════════════════════════════ */
+
+.nexus-progress-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-xs, 0.25rem);
+  width: 100%;
+}
+.nexus-progress__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-gap-sm, 0.5rem);
+}
+.nexus-progress__label {
+  font-size: var(--text-text-sm, 0.875rem);
+  color: var(--color-text-primary);
+}
+.nexus-progress__value {
+  font-size: var(--text-text-sm, 0.875rem);
+  color: var(--color-text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+.nexus-progress {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border-radius: var(--radius-corner-full, 9999px);
+  background: var(--color-surface-strong);
+}
+.nexus-progress--sm {
+  height: 0.25rem;
+}
+.nexus-progress--md {
+  height: 0.375rem;
+}
+.nexus-progress--lg {
+  height: 0.5rem;
+}
+.nexus-progress__bar {
+  height: 100%;
+  border-radius: inherit;
+  transition:
+    width var(--duration-transition-normal, 200ms) var(--ease-transition-normal, cubic-bezier(0, 0, 0.2, 1));
+}
+.nexus-progress--primary .nexus-progress__bar {
+  background: var(--color-accent-primary);
+}
+.nexus-progress--success .nexus-progress__bar {
+  background: var(--color-status-success);
+}
+.nexus-progress--warning .nexus-progress__bar {
+  background: var(--color-status-warning);
+}
+.nexus-progress--danger .nexus-progress__bar {
+  background: var(--color-status-danger);
+}
+.nexus-progress--info .nexus-progress__bar {
+  background: var(--color-status-info);
+}
+.nexus-progress__bar--indeterminate {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 35% !important;
+  animation: nexus-progress-indeterminate 1.1s var(--ease-transition-normal, cubic-bezier(0, 0, 0.2, 1))
+    infinite;
+}
+@keyframes nexus-progress-indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(calc(100% / 0.35 * 3));
+  }
+}
+
+/* ═══════════════════════════════════════════
+     Alert
+     ═══════════════════════════════════════════ */
+
+.nexus-alert {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-gap-sm, 0.5rem);
+  padding: var(--spacing-padding-md, 1rem);
+  border-radius: var(--radius-corner-md, 8px);
+  border-width: var(--border-width-stroke-thin, 1px);
+  border-style: solid;
+}
+.nexus-alert__icon {
+  flex-shrink: 0;
+  margin-top: 0.125rem;
+  line-height: 0;
+}
+.nexus-alert__icon-svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.nexus-alert__body {
+  flex: 1;
+  min-width: 0;
+}
+.nexus-alert__title {
+  margin: 0;
+  font-weight: var(--font-weight-heading-h7, 600);
+  font-size: var(--text-text-sm, 0.875rem);
+  color: var(--color-text-primary);
+}
+.nexus-alert__description {
+  margin-top: var(--spacing-gap-xs, 0.25rem);
+  font-size: var(--text-text-sm, 0.875rem);
+  color: var(--color-text-secondary);
+}
+.nexus-alert__action {
+  flex-shrink: 0;
+  align-self: center;
+}
+.nexus-alert__close {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: var(--spacing-padding-2xs, 0.25rem);
+  border: none;
+  border-radius: var(--radius-corner-sm, 4px);
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+  color: var(--color-icon-secondary);
+  transition: color var(--duration-transition-fast, 150ms) var(--ease-transition-fast, ease);
+}
+.nexus-alert__close:hover {
+  color: var(--color-icon-primary);
+}
+.nexus-alert__close-icon {
+  width: 1rem;
+  height: 1rem;
+}
+.nexus-alert--info {
+  background: color-mix(in srgb, var(--color-status-info-dim) 45%, var(--color-surface-default));
+  border-color: color-mix(in srgb, var(--color-status-info) 28%, var(--color-border-default));
+}
+.nexus-alert--info .nexus-alert__icon {
+  color: var(--color-status-info-intense);
+}
+.nexus-alert--success {
+  background: color-mix(in srgb, var(--color-status-success-dim) 45%, var(--color-surface-default));
+  border-color: color-mix(in srgb, var(--color-status-success) 28%, var(--color-border-default));
+}
+.nexus-alert--success .nexus-alert__icon {
+  color: var(--color-status-success-intense);
+}
+.nexus-alert--warning {
+  background: color-mix(in srgb, var(--color-status-warning-dim) 45%, var(--color-surface-default));
+  border-color: color-mix(in srgb, var(--color-status-warning) 28%, var(--color-border-default));
+}
+.nexus-alert--warning .nexus-alert__icon {
+  color: var(--color-status-warning-intense);
+}
+.nexus-alert--danger {
+  background: color-mix(in srgb, var(--color-status-danger-dim) 45%, var(--color-surface-default));
+  border-color: color-mix(in srgb, var(--color-status-danger) 28%, var(--color-border-default));
+}
+.nexus-alert--danger .nexus-alert__icon {
+  color: var(--color-status-danger-intense);
+}
+
+/* ═══════════════════════════════════════════
+     Pagination
+     ═══════════════════════════════════════════ */
+
+.nexus-pagination {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-xs, 0.25rem);
+}
+.nexus-pagination--sm {
+  font-size: var(--text-text-xs, 0.75rem);
+}
+.nexus-pagination--md {
+  font-size: var(--text-text-sm, 0.875rem);
+}
+.nexus-page-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-corner-md, 0.375rem);
+  font-weight: 500;
+  transition-property: color, background-color;
+  transition-duration: 150ms;
+  user-select: none;
+  border: 1px solid transparent;
+  background: transparent;
+  cursor: pointer;
+  font-family: inherit;
+  padding: 0;
+  margin: 0;
+}
+.nexus-page-btn:disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}
+.nexus-page-btn--sm {
+  width: 1.75rem;
+  height: 1.75rem;
+  font-size: var(--text-text-xs, 0.75rem);
+}
+.nexus-page-btn--md {
+  width: 2.25rem;
+  height: 2.25rem;
+  font-size: var(--text-text-sm, 0.875rem);
+}
+.nexus-page-btn--active {
+  background: var(--color-accent-primary);
+  color: var(--color-static-white);
+  border-color: var(--color-accent-primary);
+}
+.nexus-page-btn--inactive {
+  color: var(--color-text-primary);
+}
+.nexus-page-btn--inactive:hover {
+  background: var(--color-surface-hover);
+}
+.nexus-page-icon--sm {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+.nexus-page-icon--md {
+  width: 1rem;
+  height: 1rem;
+}
+
+/* ═══════════════════════════════════════════
+     Tab
+     ═══════════════════════════════════════════ */
+
+.nexus-tab-list {
+  position: relative;
+  display: flex;
+  border-bottom: 1px solid var(--color-border-default);
+}
+.nexus-tab-list--pill {
+  gap: var(--spacing-gap-xs, 0.25rem);
+  border-bottom: none;
+  background: var(--color-surface-hover);
+  border-radius: var(--radius-corner-lg, 0.5rem);
+  padding: 0.25rem;
+}
+.nexus-tab-trigger {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  font-weight: 500;
+  user-select: none;
+  outline: none;
+  transition-property: color, background-color, border-color;
+  transition-duration: 150ms;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-family: inherit;
+  padding: 0;
+  margin: 0;
+}
+.nexus-tab-trigger--line {
+  padding: 0.625rem var(--spacing-padding-md, 1rem);
+  color: var(--color-text-tertiary);
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+}
+.nexus-tab-trigger--line:hover {
+  color: var(--color-text-primary);
+}
+.nexus-tab-trigger--line-active {
+  color: var(--color-text-primary);
+  border-bottom-color: var(--color-accent-primary);
+}
+.nexus-tab-trigger--pill {
+  padding: 0.375rem var(--spacing-padding-sm, 0.75rem);
+  border-radius: var(--radius-corner-md, 0.375rem);
+  color: var(--color-text-tertiary);
+}
+.nexus-tab-trigger--pill:hover {
+  color: var(--color-text-primary);
+}
+.nexus-tab-trigger--pill-active {
+  color: var(--color-text-primary);
+  background: var(--color-surface-default);
+  box-shadow: var(--shadow-comp-sm);
+}
+.nexus-tab-trigger--sm {
+  font-size: var(--text-text-xs, 0.75rem);
+}
+.nexus-tab-trigger--md {
+  font-size: var(--text-text-sm, 0.875rem);
+}
+.nexus-tab-trigger--disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+/* ═══════════════════════════════════════════
+     Skeleton
+     ═══════════════════════════════════════════ */
+
+.nexus-skeleton {
+  position: relative;
+  overflow: hidden;
+  background: linear-gradient(
+    to right,
+    var(--color-surface-hover),
+    var(--color-surface-default),
+    var(--color-surface-hover)
+  );
+  background-size: 300% 100%;
+  animation: nexus-skeleton-shimmer 2.5s ease-in-out infinite;
+}
+.nexus-skeleton--rect {
+  border-radius: var(--radius-corner-md, 0.375rem);
+}
+.nexus-skeleton--circle {
+  border-radius: 9999px;
+}
+.nexus-skeleton__children {
+  opacity: 0;
+}
+
+/* ═══════════════════════════════════════════
+     Spinner
+     ═══════════════════════════════════════════ */
+
+.nexus-spinner {
+  animation: nexus-spin 1s linear infinite;
+  color: currentColor;
+}
+
+/* ═══════════════════════════════════════════
+     ErrorBoundary
+     ═══════════════════════════════════════════ */
+
+.nexus-error-boundary {
+  padding: 1rem;
+  border-radius: var(--radius-corner-lg, 0.5rem);
+  border: 1px solid var(--color-comp-error-border);
+  background: var(--color-comp-error-bg);
+  color: var(--color-comp-error-text);
+  font-size: var(--text-text-sm, 0.875rem);
+}
+.nexus-error-boundary__title {
+  margin: 0;
+  font-weight: 600;
+}
+.nexus-error-boundary__message {
+  margin: 0.5rem 0 0;
+  opacity: 0.8;
+}
+
+/* ═══════════════════════════════════════════
+     Divider & Simple components
+     ═══════════════════════════════════════════ */
+
+.nexus-virtual-scroll {
+  overflow: auto;
+}
+.nexus-modal-portal-target {
+  position: absolute;
+  z-index: 9999;
+}
+
+/* ═══════════════════════════════════════════
+     DataList
+     ═══════════════════════════════════════════ */
+
+.nexus-datalist-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-block: var(--spacing-padding-xl, 2rem);
+}
+.nexus-datalist-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-block: var(--spacing-padding-xl, 2rem);
+  font-size: var(--text-text-sm, 0.875rem);
+  color: var(--color-text-tertiary);
+}
+
+/* ═══════════════════════════════════════════
+     InfiniteScroll
+     ═══════════════════════════════════════════ */
+
+.nexus-infinite-scroll {
+  position: relative;
+}
+.nexus-infinite-sentinel {
+  position: relative;
+  height: 1px;
+  width: 100%;
+}
+.nexus-infinite-spinner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-block: var(--spacing-padding-md, 1rem);
+}
+.nexus-infinite-spinner-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  animation: nexus-spin 1s linear infinite;
+  border-radius: 9999px;
+  border: 2px solid var(--color-border-default);
+  border-top-color: var(--color-accent-primary);
+}
+
+/* ═══════════════════════════════════════════
+     Countdown
+     ═══════════════════════════════════════════ */
+
+.nexus-countdown {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-gap-xs, 0.25rem);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-variant-numeric: tabular-nums;
+}
+.nexus-countdown__separator {
+  color: var(--color-text-tertiary);
+  margin-inline: 0.125rem;
+}
+.nexus-countdown__label {
+  color: var(--color-text-tertiary);
+  font-size: var(--text-text-xs, 0.75rem);
+  margin-left: 0.125rem;
+}
+
+/* ═══════════════════════════════════════════
+     Select
+     ═══════════════════════════════════════════ */
+
+.nexus-select-trigger {
+  position: relative;
+  display: flex;
+  height: 2.5rem;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: var(--radius-corner-sm, 0.25rem);
+  border: 1px solid var(--color-border-default);
+  background: var(--color-surface-default, transparent);
+  color: var(--color-text-primary);
+  font-size: var(--text-text-sm, 0.875rem);
+  font-family: inherit;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  transition-property: border-color;
+  transition-duration: 200ms;
+}
+.nexus-select-trigger:hover {
+  border-color: var(--color-border-strong);
+}
+.nexus-select-trigger:has(:disabled) {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.nexus-select-trigger::placeholder {
+  color: var(--color-text-tertiary);
+}
+.nexus-select-trigger--default {
+  background: var(--color-surface-hover);
+}
+.nexus-select-trigger--outline {
+  background: var(--color-surface-default);
+}
+.nexus-select-trigger--sm {
+  width: 4rem;
+}
+.nexus-select-trigger--md {
+  width: 8rem;
+}
+.nexus-select-trigger--lg {
+  width: 12rem;
+}
+.nexus-select-trigger--full {
+  width: 100%;
+}
+.nexus-select-trigger--justify-end {
+  justify-content: flex-end;
+}
+.nexus-select-trigger__display {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  height: 100%;
+  width: calc(100% - 30px);
+  align-items: center;
+}
+.nexus-select-trigger__inner {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  flex-direction: row-reverse;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: var(--radius-corner-sm, 0.25rem);
+  padding: var(--spacing-padding-xs, 0.5rem) var(--spacing-padding-sm, 0.75rem);
+}
+.nexus-select-trigger__inner:focus {
+  outline: none;
+}
+.nexus-select-chevron {
+  width: 0.75rem;
+  height: 0.75rem;
+  opacity: 0.5;
+  transition: transform 200ms;
+}
+.nexus-select-chevron--open {
+  transform: rotate(180deg);
+}
+
+.nexus-select-content {
+  position: relative;
+  z-index: 50;
+  max-height: 24rem;
+  overflow: hidden;
+  border-radius: var(--radius-corner-sm, 0.25rem);
+  border: 1px solid var(--color-border-default);
+  background: var(--color-surface-default);
+  box-shadow: var(--shadow-comp-lg);
+  transform-origin: top center;
+  will-change: transform, opacity;
+}
+.nexus-select-content[data-state='open'] {
+  animation: nexus-select-slide-in 150ms ease-out;
+}
+.nexus-select-content[data-state='closed'] {
+  animation: nexus-select-slide-out 100ms ease-in forwards;
+}
+@keyframes nexus-select-slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scaleY(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scaleY(1);
+  }
+}
+@keyframes nexus-select-slide-out {
+  from {
+    opacity: 1;
+    transform: translateY(0) scaleY(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-4px) scaleY(0.96);
+  }
+}
+.nexus-select-content--sm {
+  width: 4rem;
+}
+.nexus-select-content--md {
+  width: 8rem;
+}
+.nexus-select-content--lg {
+  width: 12rem;
+}
+.nexus-select-content--full {
+  width: var(--radix-popper-anchor-width);
+}
+.nexus-select-viewport {
+  padding: 0.25rem;
+}
+
+.nexus-select-item {
+  position: relative;
+  display: flex;
+  width: 100%;
+  cursor: pointer;
+  align-items: center;
+  border-radius: var(--radius-corner-sm, 0.25rem);
+  padding: var(--spacing-padding-xs, 0.5rem) var(--spacing-padding-sm, 0.75rem);
+  color: var(--color-text-primary);
+  font-size: var(--text-text-sm, 0.875rem);
+  transition-property: background-color;
+  transition-duration: 150ms;
+  outline: none;
+  user-select: none;
+}
+.nexus-select-item:hover,
+.nexus-select-item:focus,
+.nexus-select-item[data-highlighted] {
+  background: var(--color-surface-hover);
+}
+.nexus-select-item[data-disabled] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+/* ═══════════════════════════════════════════
+     DropdownMenu
+     ═══════════════════════════════════════════ */
+
+.nexus-dropdown-content {
+  position: relative;
+  z-index: var(--z-index-layer-dropdown, 10);
+  min-width: 10rem;
+  overflow: hidden;
+  border-radius: var(--radius-corner-md, 0.5rem);
+  border: 1px solid var(--color-border-default);
+  background: var(--color-surface-default);
+  padding: var(--spacing-padding-xs, 0.5rem);
+  box-shadow: var(--shadow-comp-lg);
+  color: var(--color-text-primary);
+  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
+  will-change: transform, opacity;
+}
+.nexus-dropdown-content[data-state='open'] {
+  animation: nexus-dropdown-in 150ms ease-out;
+}
+.nexus-dropdown-content[data-state='closed'] {
+  animation: nexus-dropdown-out 100ms ease-in forwards;
+}
+@keyframes nexus-dropdown-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes nexus-dropdown-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+.nexus-dropdown-separator {
+  margin: var(--spacing-padding-xs, 0.5rem) calc(-1 * var(--spacing-padding-xs, 0.5rem));
+  height: 1px;
+  background: var(--color-border-default);
+}
+.nexus-dropdown-item {
+  position: relative;
+  display: flex;
+  width: 100%;
+  cursor: default;
+  align-items: center;
+  gap: var(--spacing-gap-sm, 0.5rem);
+  border-radius: var(--radius-corner-sm, 0.25rem);
+  padding: var(--spacing-padding-xs, 0.5rem) var(--spacing-padding-sm, 0.75rem);
+  font-size: var(--text-text-sm, 0.875rem);
+  color: var(--color-text-primary);
+  outline: none;
+  user-select: none;
+  transition: background-color 150ms ease;
+}
+.nexus-dropdown-item[data-highlighted] {
+  background: var(--color-surface-hover);
+}
+.nexus-dropdown-item[data-disabled] {
+  pointer-events: none;
+  opacity: var(--opacity-disabled-element, 0.4);
+}
+.nexus-dropdown-item--danger {
+  color: var(--color-status-danger);
+}
+.nexus-dropdown-item--danger[data-highlighted] {
+  background: var(--color-status-danger-dim);
+  color: var(--color-status-danger-intense);
+}
+.nexus-dropdown-item__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--color-icon-secondary);
+}
+.nexus-dropdown-item--danger .nexus-dropdown-item__icon {
+  color: var(--color-status-danger);
+}
+
+/* ═══════════════════════════════════════════
+     ToggleGroup
+     ═══════════════════════════════════════════ */
+
+.nexus-toggle-group {
+  display: inline-flex;
+  align-items: stretch;
+  position: relative;
+  border-radius: var(--radius-corner-md, 0.5rem);
+}
+.nexus-toggle-group--default {
+  background: var(--color-surface-subtle);
+  padding: var(--spacing-padding-2xs, 0.25rem);
+  gap: var(--spacing-gap-xs, 0.25rem);
+}
+
+/* ── Sliding indicator ── */
+.nexus-toggle-group__indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: var(--radius-corner-sm, 0.25rem);
+  background: var(--color-surface-default);
+  box-shadow: var(--shadow-sm);
+  pointer-events: none;
+  z-index: 0;
+  will-change: transform, width;
+}
+.nexus-toggle-group__indicator--animated {
+  transition:
+    transform 200ms cubic-bezier(0, 0, 0.2, 1),
+    width 200ms cubic-bezier(0, 0, 0.2, 1);
+}
+.nexus-toggle-group--outline {
+  border: 1px solid var(--color-border-default);
+  padding: var(--spacing-padding-2xs, 0.25rem);
+  gap: 0;
+}
+.nexus-toggle-group__item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-gap-xs, 0.25rem);
+  border-radius: var(--radius-corner-sm, 0.25rem);
+  border: none;
+  background: transparent;
+  font-size: var(--text-text-sm, 0.875rem);
+  font-weight: var(--font-weight-text-medium-sm, 500);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: color var(--duration-transition-normal, 200ms) var(--ease-transition-fast);
+  outline: none;
+  position: relative;
+  z-index: 1;
+}
+.nexus-toggle-group__item:focus-visible {
+  box-shadow: 0 0 0 2px var(--color-surface-default), 0 0 0 4px var(--color-accent-primary-focus);
+}
+.nexus-toggle-group__item[data-disabled] {
+  pointer-events: none;
+  opacity: var(--opacity-disabled-element, 0.4);
+}
+.nexus-toggle-group--default .nexus-toggle-group__item[data-state='on'] {
+  color: var(--color-text-primary);
+}
+.nexus-toggle-group--outline .nexus-toggle-group__item {
+  padding-inline: var(--spacing-padding-sm, 0.75rem);
+}
+.nexus-toggle-group--outline .nexus-toggle-group__item[data-state='on'] {
+  background: var(--color-accent-primary-dim);
+  color: var(--color-accent-primary-intense);
+}
+.nexus-toggle-group--outline .nexus-toggle-group__item:not([data-state='on']):hover {
+  background: var(--color-surface-hover);
+  color: var(--color-text-primary);
+}
+.nexus-toggle-group--sm .nexus-toggle-group__item {
+  min-height: var(--size-control-sm, 2rem);
+  padding-inline: var(--spacing-padding-sm, 0.75rem);
+}
+.nexus-toggle-group--md .nexus-toggle-group__item {
+  min-height: var(--size-control-md, 2.5rem);
+  padding-inline: var(--spacing-padding-md, 1rem);
+}
+.nexus-toggle-group--lg .nexus-toggle-group__item {
+  min-height: var(--size-control-lg, 3rem);
+  padding-inline: var(--spacing-padding-lg, 1.5rem);
+}
+.nexus-toggle-group__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--color-icon-secondary);
+}
+.nexus-toggle-group__item[data-state='on'] .nexus-toggle-group__icon {
+  color: var(--color-icon-primary);
+}
+
+/* ═══════════════════════════════════════════
+     Slider
+     ═══════════════════════════════════════════ */
+
+.nexus-slider-wrapper {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: var(--spacing-gap-sm, 0.5rem);
+}
+.nexus-slider__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-gap-md, 1rem);
+}
+.nexus-slider__label {
+  font-size: var(--text-label-md, 0.875rem);
+  font-weight: var(--font-weight-label-md, 500);
+  color: var(--color-text-primary);
+}
+.nexus-slider__value {
+  font-size: var(--text-text-sm, 0.875rem);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-secondary);
+}
+.nexus-slider {
+  position: relative;
+  display: flex;
+  width: 100%;
+  touch-action: none;
+  user-select: none;
+  align-items: center;
+}
+.nexus-slider[data-disabled] {
+  opacity: var(--opacity-disabled-element, 0.4);
+  pointer-events: none;
+}
+.nexus-slider__track {
+  position: relative;
+  flex-grow: 1;
+  overflow: hidden;
+  border-radius: var(--radius-corner-full, 9999px);
+  background: var(--color-surface-strong);
+}
+.nexus-slider__range {
+  position: absolute;
+  height: 100%;
+  border-radius: var(--radius-corner-full, 9999px);
+  background: var(--color-accent-primary);
+}
+.nexus-slider__thumb {
+  display: block;
+  flex-shrink: 0;
+  border-radius: var(--radius-corner-full, 9999px);
+  border: 2px solid var(--color-accent-primary);
+  background: var(--color-surface-default);
+  box-shadow: var(--shadow-sm);
+  outline: none;
+  transition:
+    box-shadow 150ms ease,
+    transform 150ms ease;
+}
+.nexus-slider__thumb:hover {
+  box-shadow: var(--shadow-md);
+}
+.nexus-slider__thumb:focus-visible {
+  box-shadow:
+    0 0 0 2px var(--color-surface-default),
+    0 0 0 4px var(--color-accent-primary-focus);
+}
+.nexus-slider--sm .nexus-slider__track {
+  height: 0.25rem;
+}
+.nexus-slider--sm .nexus-slider__thumb {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+.nexus-slider--md .nexus-slider__track {
+  height: 0.375rem;
+}
+.nexus-slider--md .nexus-slider__thumb {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+.nexus-slider--lg .nexus-slider__track {
+  height: 0.5rem;
+}
+.nexus-slider--lg .nexus-slider__thumb {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+/* ═══════════════════════════════════════════
+     Tooltip
+     ═══════════════════════════════════════════ */
+
+.nexus-tooltip-content {
+  z-index: 50;
+  display: flex;
+  overflow: hidden;
+  border-radius: var(--radius-corner-md, 0.375rem);
+  padding: var(--spacing-padding-xs, 0.5rem) var(--spacing-padding-sm, 0.75rem);
+  font-size: var(--text-text-sm, 0.875rem);
+}
+.nexus-tooltip--light {
+  border: 1px solid var(--color-border-default);
+  background: var(--color-static-white);
+  color: var(--color-static-black);
+  box-shadow: var(--shadow-comp-md);
+}
+.nexus-tooltip--dark {
+  border: none;
+  background: var(--color-static-black);
+  color: var(--color-static-white);
+}
+.nexus-tooltip-arrow--dark {
+  fill: var(--color-static-black);
+}
+.nexus-tooltip-arrow--light {
+  fill: var(--color-static-white);
+}
+.nexus-tooltip-trigger {
+  cursor: default;
+}
+
+/* ═══════════════════════════════════════════
+     Popover
+     ═══════════════════════════════════════════ */
+
+.nexus-popover-content {
+  z-index: 50;
+  border-radius: var(--radius-corner-lg, 0.5rem);
+  border: 1px solid var(--color-border-default);
+  padding: var(--spacing-padding-md, 1rem);
+  box-shadow: var(--shadow-comp-lg);
+  outline: none;
+  background: var(--color-surface-default);
+  color: var(--color-text-primary);
+  transform-origin: var(--radix-popover-content-transform-origin);
+  will-change: transform, opacity;
+}
+.nexus-popover-content[data-state='open'] {
+  animation: nexus-popover-in 150ms ease-out;
+}
+.nexus-popover-content[data-state='closed'] {
+  animation: nexus-popover-out 100ms ease-in forwards;
+}
+@keyframes nexus-popover-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes nexus-popover-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+.nexus-popover-arrow {
+  fill: var(--color-surface-default);
+}
+
+/* ═══════════════════════════════════════════
+     Drawer
+     ═══════════════════════════════════════════ */
+
+.nexus-drawer-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background: var(--color-comp-overlay);
+}
+.nexus-drawer-overlay--blur-sm {
+  backdrop-filter: blur(4px);
+}
+.nexus-drawer-overlay--blur-md {
+  backdrop-filter: blur(12px);
+}
+.nexus-drawer-content {
+  position: fixed;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-surface-default);
+}
+.nexus-drawer-content--bottom {
+  inset-inline: 0;
+  bottom: 0;
+  margin-top: 6rem;
+  border-top-left-radius: 1rem;
+  border-top-right-radius: 1rem;
+  border-top: 1px solid var(--color-border-default);
+}
+.nexus-drawer-content--top {
+  inset-inline: 0;
+  top: 0;
+  margin-bottom: 6rem;
+  border-bottom-left-radius: 1rem;
+  border-bottom-right-radius: 1rem;
+  border-bottom: 1px solid var(--color-border-default);
+}
+.nexus-drawer-content--left {
+  inset-block: 0;
+  left: 0;
+  margin-right: 6rem;
+  width: 85vw;
+  max-width: 24rem;
+  border-top-right-radius: 1rem;
+  border-bottom-right-radius: 1rem;
+  border-right: 1px solid var(--color-border-default);
+}
+.nexus-drawer-content--right {
+  inset-block: 0;
+  right: 0;
+  margin-left: 6rem;
+  width: 85vw;
+  max-width: 24rem;
+  border-top-left-radius: 1rem;
+  border-bottom-left-radius: 1rem;
+  border-left: 1px solid var(--color-border-default);
+}
+.nexus-drawer-handle {
+  display: flex;
+  justify-content: center;
+}
+.nexus-drawer-handle--bottom {
+  padding-top: var(--spacing-padding-md, 1rem);
+}
+.nexus-drawer-handle--top {
+  padding-bottom: var(--spacing-padding-md, 1rem);
+}
+.nexus-drawer-handle__bar {
+  background: var(--color-border-strong);
+  height: 0.375rem;
+  width: 3rem;
+  border-radius: 9999px;
+}
+.nexus-drawer-title {
+  font-size: var(--text-text-lg, 1.125rem);
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+.nexus-drawer-description {
+  font-size: var(--text-text-sm, 0.875rem);
+  color: var(--color-text-secondary);
+}
+
+/* ═══════════════════════════════════════════
+     Accordion
+     ═══════════════════════════════════════════ */
+
+.nexus-accordion-item {
+  border-bottom: 1px solid var(--color-border-default);
+}
+.nexus-accordion-header {
+  display: flex;
+}
+.nexus-accordion-trigger {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0;
+  padding-block: var(--spacing-padding-md, 1rem);
+  margin: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  transition: all 150ms;
+}
+.nexus-accordion-trigger[data-state='open'] > .nexus-accordion-chevron {
+  transform: rotate(180deg);
+}
+.nexus-accordion-chevron {
+  width: 0.75rem;
+  height: 0.75rem;
+  flex-shrink: 0;
+  transition: transform 200ms;
+}
+.nexus-accordion-content {
+  overflow: hidden;
+  transition: all 200ms;
+}
+.nexus-accordion-content[data-state='open'] {
+  animation: nexus-accordion-down 200ms ease-out;
+}
+.nexus-accordion-content[data-state='closed'] {
+  animation: nexus-accordion-up 200ms ease-in;
+}
+.nexus-accordion-content__inner {
+  padding-top: 0;
+  padding-bottom: var(--spacing-padding-md, 1rem);
+}
+
+/* ═══════════════════════════════════════════
+     Ellipsis
+     ═══════════════════════════════════════════ */
+
+.nexus-ellipsis {
+  position: relative;
+}
+.nexus-ellipsis__content {
+  overflow: hidden;
+  transition: height 300ms;
+}
+.nexus-ellipsis__trigger {
+  margin-top: 0.25rem;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-xs, 0.25rem);
+  font-size: var(--text-text-sm, 0.875rem);
+  color: var(--color-text-secondary);
+  transition-property: color;
+  transition-duration: 150ms;
+}
+.nexus-ellipsis__trigger:hover {
+  color: var(--color-text-primary);
+}
+.nexus-ellipsis__trigger--expanded > svg {
+  transform: rotate(180deg);
+}
+.nexus-ellipsis__chevron {
+  width: 0.875rem;
+  height: 0.875rem;
+  transition: transform 200ms;
+}
+
+/* ═══════════════════════════════════════════
+     Marquee
+     ═══════════════════════════════════════════ */
+
+.nexus-marquee {
+  overflow: hidden;
+}
+.nexus-marquee--pause-on-hover:hover > div {
+  animation-play-state: paused !important;
+}
+
+/* ═══════════════════════════════════════════
+     Carousel
+     ═══════════════════════════════════════════ */
+
+.nexus-carousel {
+  position: relative;
+}
+.nexus-carousel__viewport {
+  overflow: hidden;
+}
+.nexus-carousel__container {
+  display: flex;
+}
+.nexus-carousel-slide {
+  min-width: 0;
+  flex-shrink: 0;
+  flex-grow: 0;
+  flex-basis: 100%;
+}
+.nexus-carousel-btn {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 10;
+  width: 2rem;
+  height: 2rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background: var(--color-surface-default);
+  border: 1px solid var(--color-border-default);
+  box-shadow: var(--shadow-comp-sm);
+  color: var(--color-text-primary);
+  cursor: pointer;
+  font: inherit;
+  padding: 0;
+  margin: 0;
+  transition-property: background-color;
+  transition-duration: 150ms;
+}
+.nexus-carousel-btn:hover {
+  background: var(--color-surface-hover);
+}
+.nexus-carousel-btn:disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}
+.nexus-carousel-btn--prev {
+  left: 0.5rem;
+}
+.nexus-carousel-btn--next {
+  right: 0.5rem;
+}
+.nexus-carousel-btn__icon {
+  width: 1rem;
+  height: 1rem;
+}
+.nexus-carousel-dots {
+  display: flex;
+  justify-content: center;
+  gap: 0.375rem;
+  margin-top: var(--spacing-padding-sm, 0.75rem);
+}
+.nexus-carousel-dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 9999px;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  transition-property: background-color;
+  transition-duration: 150ms;
+}
+.nexus-carousel-dot--active {
+  background: var(--color-accent-primary);
+}
+.nexus-carousel-dot--inactive {
+  background: var(--color-border-default);
+}
+.nexus-carousel-dot--inactive:hover {
+  background: var(--color-text-tertiary);
+}
+
+/* ═══════════════════════════════════════════
+     Toast
+     ═══════════════════════════════════════════ */
+
+.nexus-toast {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-sm, 0.75rem);
+  border-radius: var(--radius-corner-lg, 0.5rem);
+  border: 1px solid var(--color-border-default);
+  padding: var(--spacing-padding-sm, 0.75rem) var(--spacing-padding-md, 1rem);
+  box-shadow: var(--shadow-comp-lg);
+  background: var(--color-surface-default);
+  color: var(--color-text-primary);
+}
+.nexus-toast__title {
+  font-size: var(--text-text-sm, 0.875rem);
+  font-weight: 500;
+}
+.nexus-toast__desc {
+  font-size: var(--text-text-xs, 0.75rem);
+  color: var(--color-text-secondary);
+}
+.nexus-toast--success {
+  border-color: color-mix(
+    in srgb,
+    var(--color-status-positive) 30%,
+    transparent
+  );
+  background: color-mix(in srgb, var(--color-status-positive) 10%, transparent);
+  color: var(--color-status-positive);
+}
+.nexus-toast--error {
+  border-color: color-mix(in srgb, var(--color-status-danger) 30%, transparent);
+  background: color-mix(in srgb, var(--color-status-danger) 10%, transparent);
+  color: var(--color-status-danger);
+}
+.nexus-toast--warning {
+  border-color: color-mix(
+    in srgb,
+    var(--color-status-caution) 30%,
+    transparent
+  );
+  background: color-mix(in srgb, var(--color-status-caution) 10%, transparent);
+  color: var(--color-status-caution);
+}
+.nexus-toast--info {
+  border-color: color-mix(
+    in srgb,
+    var(--color-accent-primary) 30%,
+    transparent
+  );
+  background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent);
+  color: var(--color-accent-primary);
+}
+.nexus-toast__action-btn {
+  background: var(--color-accent-primary);
+  color: var(--color-accent-on-primary);
+  border-radius: var(--radius-corner-sm, 0.25rem);
+  padding: 0.375rem var(--spacing-padding-sm, 0.75rem);
+  font-size: var(--text-text-xs, 0.75rem);
+  font-weight: 500;
+}
+.nexus-toast__cancel-btn {
+  background: var(--color-surface-hover);
+  color: var(--color-text-secondary);
+  border-radius: var(--radius-corner-sm, 0.25rem);
+  padding: 0.375rem var(--spacing-padding-sm, 0.75rem);
+  font-size: var(--text-text-xs, 0.75rem);
+  font-weight: 500;
+}
+.nexus-toast__close-btn {
+  color: var(--color-text-tertiary);
+}
+.nexus-toast__close-btn:hover {
+  color: var(--color-text-primary);
+}
+
+/* ═══════════════════════════════════════════
+     Table
+     ═══════════════════════════════════════════ */
+
+.nexus-table-wrap {
+  overflow-x: auto;
+}
+.nexus-table {
+  width: 100%;
+}
+.nexus-table-thead {
+  display: flex;
+  background: var(--color-surface-default);
+}
+.nexus-table-th {
+  display: flex;
+}
+.nexus-table-th--sortable {
+  cursor: pointer;
+}
+.nexus-table-th__sort-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-gap-xs, 0.25rem);
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  text-align: inherit;
+  width: 100%;
+}
+.nexus-table-sort-icon {
+  width: 1rem;
+  height: 1rem;
+}
+.nexus-table-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-block: 3rem;
+}
+.nexus-table-nodata {
+  color: var(--color-text-tertiary);
+}
+.nexus-table-loading-icon {
+  width: 2rem;
+  height: 2rem;
+  animation: nexus-spin 1s linear infinite;
+  border-radius: 9999px;
+  border: 2px solid var(--color-border-default);
+  border-top-color: var(--color-accent-primary);
+}
+.nexus-table-skeleton-row {
+  display: flex;
+  cursor: default;
+}
+.nexus-table-skeleton-td {
+  height: 100%;
+  width: 100%;
+  padding-block: var(--spacing-padding-md, 1rem);
+}
+.nexus-table-skeleton-bar {
+  height: 1rem;
+  width: 100%;
+}
+
+/* TableRow */
+.nexus-table-row {
+  border-bottom: 1px solid var(--color-border-default);
+  display: flex;
+  min-width: 0;
+}
+.nexus-table-row::-webkit-scrollbar {
+  display: none;
+}
+.nexus-table-row--default:hover {
+  background: var(--color-surface-hover);
+}
+.nexus-table-row--accent:hover {
+  background: color-mix(in srgb, var(--color-accent-primary) 5%, transparent);
+}
+
+/* TdColumn */
+.nexus-td {
+  min-width: 0;
+  width: 100%;
+}
+.nexus-td__inner {
+  border-radius: var(--radius-corner-md, 0.375rem);
+  padding: 2px 0.25rem;
+  transition-property: background-color;
+  transition-duration: 150ms;
+}
+.nexus-td__inner--flex {
+  display: flex;
+}
+.nexus-td__inner--highlight {
+  background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent);
+  outline: 1px dashed var(--color-accent-primary);
+  outline-offset: -1px;
+}
+.nexus-td--nowrap {
+  white-space: nowrap;
+}
+.nexus-td--truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.nexus-td--wrap {
+  white-space: normal;
+  overflow-wrap: break-word;
+}
+.nexus-td--break-all {
+  white-space: normal;
+  word-break: break-all;
+}
+.nexus-td--center {
+  text-align: center;
+  justify-content: center;
+}
+.nexus-td--left {
+  text-align: left;
+  justify-content: flex-start;
+}
+.nexus-td--right {
+  text-align: right;
+  justify-content: flex-end;
+}
+
+/* ═══════════════════════════════════════════
+     Modal
+     ═══════════════════════════════════════════ */
+
+.nexus-modal-wrap {
+  pointer-events: none;
+  position: fixed;
+  inset: 0;
+  z-index: 99999;
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-primary);
+}
+.nexus-modal-wrap--bottom-sheet {
+  align-items: flex-end;
+}
+.nexus-modal-wrap--slide-left {
+  height: 100%;
+  justify-content: flex-start;
+}
+.nexus-modal-wrap--slide-right {
+  height: 100%;
+  justify-content: flex-end;
+}
+.nexus-modal-wrap--full-page,
+.nexus-modal-wrap--full-page-reverse {
+  height: 100%;
+  justify-content: flex-start;
+}
+
+.nexus-modal-inner {
+  position: relative;
+  z-index: 2;
+  overflow: hidden;
+  pointer-events: auto;
+  border-radius: var(--radius-corner-lg, 12px);
+  border: 1px solid var(--color-border-default);
+  background: var(--color-surface-default);
+  color: var(--color-text-primary);
+}
+:where(.nexus-modal-inner) {
+  width: 100%;
+  min-height: 200px;
+}
+.nexus-modal-inner > div {
+  display: contents;
+}
+@media (min-width: 640px) {
+  :where(.nexus-modal-inner) {
+    width: 480px;
+    min-height: auto;
+  }
+}
+.nexus-modal-inner--bottom-sheet {
+  margin: 0;
+  width: 100%;
+  border-top-left-radius: 1rem;
+  border-top-right-radius: 1rem;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-top: 1px solid var(--color-border-default);
+  padding: 1.5rem 1rem 0;
+}
+.nexus-modal-inner--slide-left,
+.nexus-modal-inner--slide-right {
+  height: 100%;
+  border-radius: 0;
+}
+.nexus-modal-inner--full-page,
+.nexus-modal-inner--full-page-reverse {
+  height: 100%;
+  width: 100%;
+  border-radius: 0;
+  border-color: transparent;
+}
+@media (min-width: 640px) {
+  .nexus-modal-inner--full-page,
+  .nexus-modal-inner--full-page-reverse {
+    width: 100%;
+  }
+}
+.nexus-modal-inner--draggable {
+  min-width: 320px;
+  overflow: visible;
+}
+.nexus-modal-inner--has-footer {
+  padding-bottom: 88px;
+}
+.nexus-modal-inner--bottom-sheet.nexus-modal-inner--has-footer {
+  padding-bottom: 5rem;
+}
+
+.nexus-modal-header {
+  position: relative;
+  padding: 1.5rem 1.25rem 0;
+}
+.nexus-modal-header--bottom-sheet {
+  padding: 0;
+}
+.nexus-modal-header--draggable {
+  cursor: grab;
+  user-select: none;
+}
+.nexus-modal-header--draggable:active {
+  cursor: grabbing;
+}
+
+.nexus-modal-close-btn {
+  position: absolute;
+  top: 1.5rem;
+  right: 1.25rem;
+  z-index: 1;
+  margin-left: auto;
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: flex-end;
+  border: none;
+  background: transparent;
+  padding: 0;
+}
+.nexus-modal-close-btn--bottom-sheet {
+  position: relative;
+  top: 0;
+  right: 0;
+}
+.nexus-modal-close-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--color-text-muted);
+}
+
+.nexus-modal-title {
+  margin: 0;
+  padding-right: 42px;
+  font-size: var(--text-text-lg, 1.125rem);
+  font-weight: 600;
+  line-height: 26px;
+  letter-spacing: -0.002em;
+  color: var(--color-text-primary);
+}
+.nexus-modal-title--bottom-sheet {
+  padding-top: 0.375rem;
+  line-height: 1.75rem;
+  letter-spacing: -0.012em;
+}
+.nexus-modal-desc {
+  color: var(--color-text-muted);
+  font-size: var(--text-text-xs, 0.75rem);
+  margin-top: 0.25rem;
+}
+
+.nexus-modal-body {
+  position: relative;
+  overflow-y: auto;
+  padding: 1.5rem 1.25rem 0;
+}
+.nexus-modal-body::-webkit-scrollbar {
+  display: none;
+}
+.nexus-modal-body--no-footer {
+  padding-bottom: 1.5rem;
+}
+.nexus-modal-body--bottom-sheet {
+  margin-top: 1.5rem;
+  max-height: calc(100vh - 108px);
+  padding: 0 0 1.5rem;
+}
+.nexus-modal-body--slide,
+.nexus-modal-body--full-page {
+  height: 100%;
+  max-height: 100%;
+  overflow-y: auto;
+}
+.nexus-modal-body--full-page {
+  padding-bottom: 0;
+}
+
+.nexus-modal-footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  display: flex;
+  width: 100%;
+  padding: 1.5rem 1.25rem 1.25rem;
+}
+.nexus-modal-footer button {
+  height: 3rem;
+  flex: 1;
+}
+.nexus-modal-footer--bottom-sheet {
+  padding: 0.75rem 1rem 1.5rem;
+}
+.nexus-modal-footer--draggable {
+  position: relative;
+}
+
+.nexus-modal-dim {
+  pointer-events: auto;
+  position: fixed;
+  inset: 0;
+  z-index: 1;
+  display: block;
+  height: 100vh;
+  width: 100vw;
+  background: color-mix(
+    in srgb,
+    var(--color-static-black, #000) 75%,
+    transparent
+  );
+}
+.nexus-modal-dim--hidden {
+  display: none;
+}
+.nexus-modal-dim--draggable {
+  background: color-mix(
+    in srgb,
+    var(--color-static-black, #000) 30%,
+    transparent
+  );
+}
+
+.nexus-modal-bottom-sheet-handle {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  padding-top: 0.75rem;
+  padding-bottom: 0.5rem;
+}
+.nexus-modal-bottom-sheet-bar {
+  background: var(--color-border-default);
+  height: 0.375rem;
+  width: 4rem;
+  border-radius: 9999px;
+}
+
+.nexus-modal-component {
+  opacity: 0;
+}
+.nexus-modal-component--visible {
+  opacity: 1;
+}
+.nexus-modal-component--portal {
+  position: relative;
+}
+.nexus-modal-component--enter .nexus-modal-inner {
+  animation-direction: var(--modal-animation-direction);
+  animation-duration: var(--modal-animation-duration);
+  animation-name: var(--modal-animation-name);
+  animation-timing-function: var(--modal-animation-timing-function);
+}
+.nexus-modal-component--leave .nexus-modal-inner {
+  animation-direction: reverse;
+  animation-duration: var(--modal-animation-duration);
+  animation-fill-mode: var(--modal-animation-fill-mode);
+  animation-name: var(--modal-animation-name);
+  animation-timing-function: var(--modal-animation-timing-function);
+}
+
+.nexus-contents {
+  display: contents;
+}
+
+/* ═══════════════════════════════════════════
+     Animation utilities (Radix enter/exit)
+     ═══════════════════════════════════════════ */
+
+.nexus-animate-in {
+  animation: nexus-enter 200ms ease-out;
+  --nx-enter-opacity: 1;
+  --nx-enter-scale: 1;
+  --nx-enter-translate-x: 0;
+  --nx-enter-translate-y: 0;
+}
+.nexus-animate-out {
+  animation: nexus-exit 150ms ease-in forwards;
+  --nx-exit-opacity: 1;
+  --nx-exit-scale: 1;
+  --nx-exit-translate-x: 0;
+  --nx-exit-translate-y: 0;
+}
+.nexus-fade-in-0 {
+  --nx-enter-opacity: 0;
+}
+.nexus-fade-out-0 {
+  --nx-exit-opacity: 0;
+}
+.nexus-zoom-in-95 {
+  --nx-enter-scale: 0.95;
+}
+.nexus-zoom-out-95 {
+  --nx-exit-scale: 0.95;
+}
+.nexus-slide-in-from-top-2 {
+  --nx-enter-translate-y: -0.5rem;
+}
+.nexus-slide-in-from-bottom-2 {
+  --nx-enter-translate-y: 0.5rem;
+}
+.nexus-slide-in-from-left-2 {
+  --nx-enter-translate-x: -0.5rem;
+}
+.nexus-slide-in-from-right-2 {
+  --nx-enter-translate-x: 0.5rem;
+}
+
+/* ═══════════════════════════════════════════
+   Keyframes
+   ═══════════════════════════════════════════ */
+
+@keyframes nexus-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes nexus-enter {
+  from {
+    opacity: var(--nx-enter-opacity, 1);
+    transform: translate3d(
+        var(--nx-enter-translate-x, 0),
+        var(--nx-enter-translate-y, 0),
+        0
+      )
+      scale3d(
+        var(--nx-enter-scale, 1),
+        var(--nx-enter-scale, 1),
+        var(--nx-enter-scale, 1)
+      );
+  }
+}
+
+@keyframes nexus-exit {
+  to {
+    opacity: var(--nx-exit-opacity, 1);
+    transform: translate3d(
+        var(--nx-exit-translate-x, 0),
+        var(--nx-exit-translate-y, 0),
+        0
+      )
+      scale3d(
+        var(--nx-exit-scale, 1),
+        var(--nx-exit-scale, 1),
+        var(--nx-exit-scale, 1)
+      );
+  }
+}
+
+@keyframes nexus-accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes nexus-accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+@keyframes nexus-skeleton-shimmer {
+  0% {
+    background-position: 300% 0;
+  }
+  100% {
+    background-position: -300% 0;
+  }
+}
+
+@keyframes modal-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes modal-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes modal-scale {
+  from {
+    transform: scale(0);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
+@keyframes modal-small-scale {
+  from {
+    transform: scale(0.9);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
+@keyframes modal-pop-fade {
+  0% {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+  60% {
+    transform: scale(1.03);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes modal-bottom-sheet {
+  from {
+    transform: translateY(calc(100% + 60px));
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes modal-slide-left {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes modal-slide-right {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes modal-full-page {
+  from {
+    transform: translateY(60%);
+    opacity: 0.5;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes modal-full-page-reverse {
+  from {
+    transform: translateY(-60%);
+    opacity: 0.5;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* ═══════════════════════════════════════════
+     EmptyState
+     ═══════════════════════════════════════════ */
+
+.nexus-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: var(--spacing-gap-sm, 0.5rem);
+  padding: var(--spacing-padding-lg, 1.5rem);
+  color: var(--color-text-primary);
+}
+.nexus-empty-state__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: var(--spacing-gap-xs, 0.25rem);
+  color: var(--color-icon-muted);
+}
+.nexus-empty-state__default-icon {
+  width: var(--size-icon-xl, 2rem);
+  height: var(--size-icon-xl, 2rem);
+}
+.nexus-empty-state--sm .nexus-empty-state__default-icon {
+  width: var(--size-icon-lg, 1.5rem);
+  height: var(--size-icon-lg, 1.5rem);
+}
+.nexus-empty-state--lg .nexus-empty-state__default-icon {
+  width: var(--size-control-md, 2.5rem);
+  height: var(--size-control-md, 2.5rem);
+}
+.nexus-empty-state__title {
+  margin: 0;
+  font-size: var(--text-heading-h6, 1rem);
+  font-weight: var(--font-weight-heading-h6, 600);
+  letter-spacing: var(--letter-spacing-heading-h6, 0);
+  color: var(--color-text-primary);
+}
+.nexus-empty-state__description {
+  margin: 0;
+  max-width: 24rem;
+  font-size: var(--text-text-sm, 0.875rem);
+  font-weight: var(--font-weight-text-sm, 400);
+  letter-spacing: var(--letter-spacing-text-sm, -0.01em);
+  color: var(--color-text-secondary);
+}
+.nexus-empty-state__action {
+  margin-top: var(--spacing-gap-sm, 0.5rem);
+}
+.nexus-empty-state--sm {
+  padding: var(--spacing-padding-md, 1rem);
+  gap: var(--spacing-gap-xs, 0.25rem);
+}
+.nexus-empty-state--sm .nexus-empty-state__title {
+  font-size: var(--text-text-semibold-sm, 0.875rem);
+}
+.nexus-empty-state--sm .nexus-empty-state__description {
+  font-size: var(--text-text-xs, 0.75rem);
+}
+.nexus-empty-state--lg {
+  padding: var(--spacing-padding-xl, 2rem);
+  gap: var(--spacing-gap-md, 1rem);
+}
+.nexus-empty-state--lg .nexus-empty-state__title {
+  font-size: var(--text-heading-h5, 1.125rem);
+}
+
+/* ═══════════════════════════════════════════
+     Breadcrumb
+     ═══════════════════════════════════════════ */
+
+.nexus-breadcrumb {
+  font-size: var(--text-text-sm, 0.875rem);
+  line-height: 1.25;
+}
+.nexus-breadcrumb__list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: 0;
+}
+.nexus-breadcrumb__item {
+  display: inline-flex;
+  align-items: center;
+}
+.nexus-breadcrumb__separator {
+  display: inline-flex;
+  align-items: center;
+  margin: 0 var(--spacing-gap-xs, 0.25rem);
+  color: var(--color-icon-tertiary);
+  user-select: none;
+}
+.nexus-breadcrumb__separator-icon {
+  width: var(--size-icon-xs, 0.75rem);
+  height: var(--size-icon-xs, 0.75rem);
+}
+.nexus-breadcrumb__link {
+  color: var(--color-text-secondary);
+  text-decoration: none;
+  transition: color 150ms ease;
+}
+.nexus-breadcrumb__link:hover {
+  color: var(--color-text-primary);
+}
+.nexus-breadcrumb__link--btn {
+  border: none;
+  background: none;
+  cursor: pointer;
+  font: inherit;
+  padding: 0;
+}
+.nexus-breadcrumb__current {
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-text-medium-sm, 500);
+}
+.nexus-breadcrumb__ellipsis {
+  color: var(--color-text-tertiary);
+  user-select: none;
+}
+
+/* ═══════════════════════════════════════════
+     Stepper
+     ═══════════════════════════════════════════ */
+
+.nexus-stepper {
+  width: 100%;
+}
+
+/* ── Horizontal ── */
+.nexus-stepper--horizontal {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+}
+.nexus-stepper--horizontal .nexus-stepper__step {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+.nexus-stepper--horizontal .nexus-stepper__indicator-wrap {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  justify-content: center;
+}
+.nexus-stepper--horizontal .nexus-stepper__connector {
+  flex: 1;
+  height: 2px;
+  background: var(--color-border-default);
+  transition: background var(--duration-transition-normal, 200ms) var(--ease-transition-normal);
+}
+.nexus-stepper--horizontal .nexus-stepper__connector--hidden {
+  visibility: hidden;
+}
+.nexus-stepper--horizontal .nexus-stepper__connector--completed {
+  background: var(--color-accent-primary);
+}
+.nexus-stepper--horizontal .nexus-stepper__content {
+  margin-top: var(--spacing-gap-sm, 0.5rem);
+  padding: 0 var(--spacing-padding-2xs, 0.25rem);
+}
+
+/* ── Vertical ── */
+.nexus-stepper--vertical {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+.nexus-stepper--vertical .nexus-stepper__step {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  gap: var(--spacing-gap-sm, 0.5rem);
+}
+.nexus-stepper--vertical .nexus-stepper__indicator-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+}
+.nexus-stepper--vertical .nexus-stepper__connector {
+  width: 2px;
+  flex: 1;
+  min-height: var(--spacing-padding-sm, 0.75rem);
+  background: var(--color-border-default);
+  transition: background var(--duration-transition-normal, 200ms) var(--ease-transition-normal);
+}
+.nexus-stepper--vertical .nexus-stepper__connector--completed {
+  background: var(--color-accent-primary);
+}
+.nexus-stepper--vertical .nexus-stepper__content {
+  padding: var(--spacing-padding-xs, 0.5rem) 0;
+}
+
+/* ── Indicator (공통) ── */
+.nexus-stepper__indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--size-control-sm, 2rem);
+  height: var(--size-control-sm, 2rem);
+  border-radius: var(--radius-corner-full, 9999px);
+  border: 2px solid var(--color-border-medium);
+  background: var(--color-surface-default);
+  font-size: var(--text-text-sm, 0.875rem);
+  font-weight: var(--font-weight-text-medium-sm, 500);
+  color: var(--color-text-secondary);
+  transition: all var(--duration-transition-normal, 200ms) var(--ease-transition-normal);
+}
+.nexus-stepper--sm .nexus-stepper__indicator {
+  width: 1.75rem;
+  height: 1.75rem;
+  font-size: var(--text-text-xs, 0.75rem);
+}
+.nexus-stepper__check {
+  width: var(--size-icon-sm, 1rem);
+  height: var(--size-icon-sm, 1rem);
+}
+.nexus-stepper--sm .nexus-stepper__check {
+  width: var(--size-icon-xs, 0.75rem);
+  height: var(--size-icon-xs, 0.75rem);
+}
+
+/* ── State colors ── */
+.nexus-stepper__step--completed .nexus-stepper__indicator {
+  border-color: var(--color-accent-primary);
+  background: var(--color-accent-primary);
+  color: var(--color-accent-on-primary);
+}
+.nexus-stepper__step--active .nexus-stepper__indicator {
+  border-color: var(--color-accent-primary);
+  color: var(--color-accent-primary);
+  background: var(--color-surface-default);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-primary) 20%, transparent);
+}
+.nexus-stepper__step--error .nexus-stepper__indicator {
+  border-color: var(--color-status-danger);
+  color: var(--color-status-danger);
+  background: var(--color-surface-default);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-status-danger) 20%, transparent);
+}
+.nexus-stepper__step--pending .nexus-stepper__indicator {
+  border-color: var(--color-border-default);
+  color: var(--color-text-tertiary);
+}
+
+/* ── Labels ── */
+.nexus-stepper__label {
+  display: block;
+  font-size: var(--text-text-sm, 0.875rem);
+  font-weight: var(--font-weight-text-medium-sm, 500);
+  color: var(--color-text-primary);
+}
+.nexus-stepper--sm .nexus-stepper__label {
+  font-size: var(--text-text-xs, 0.75rem);
+}
+.nexus-stepper__description {
+  display: block;
+  margin-top: var(--spacing-gap-xs, 0.25rem);
+  font-size: var(--text-text-xs, 0.75rem);
+  color: var(--color-text-secondary);
+}
+.nexus-stepper__step--pending .nexus-stepper__label {
+  color: var(--color-text-secondary);
+}
+.nexus-stepper__step--pending .nexus-stepper__description {
+  color: var(--color-text-muted);
+}
+
+/* ═══════════════════════════════════════════
+     TagInput
+     ═══════════════════════════════════════════ */
+
+.nexus-tag-input-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-xs, 0.25rem);
+}
+.nexus-tag-input__label {
+  font-size: var(--text-label-md, 0.875rem);
+  font-weight: var(--font-weight-label-md, 500);
+  color: var(--color-text-primary);
+}
+.nexus-tag-input {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-gap-xs, 0.25rem);
+  padding: var(--spacing-padding-xs, 0.5rem);
+  border: var(--border-width-stroke-default, 1px) solid var(--color-border-default);
+  border-radius: var(--radius-corner-md, 0.5rem);
+  background: var(--color-surface-default);
+  cursor: text;
+  transition: border-color 150ms ease;
+}
+.nexus-tag-input:focus-within {
+  border-color: var(--color-border-default-focus, var(--color-accent-primary));
+}
+.nexus-tag-input--disabled {
+  opacity: var(--opacity-disabled-element, 0.4);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.nexus-tag-input--sm {
+  padding: var(--spacing-padding-2xs, 0.25rem);
+  gap: 0.125rem;
+  font-size: var(--text-text-xs, 0.75rem);
+}
+.nexus-tag-input--md {
+  font-size: var(--text-text-sm, 0.875rem);
+}
+.nexus-tag-input--lg {
+  padding: var(--spacing-padding-sm, 0.75rem);
+  font-size: var(--text-text-base, 1rem);
+}
+.nexus-tag-input__tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.125rem 0.5rem;
+  border-radius: var(--radius-corner-sm, 0.25rem);
+  background: var(--color-surface-subtle);
+  color: var(--color-text-primary);
+  font-size: inherit;
+  line-height: 1.5;
+  white-space: nowrap;
+}
+.nexus-tag-input__tag-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  color: var(--color-icon-tertiary);
+  transition: color 150ms;
+}
+.nexus-tag-input__tag-close:hover {
+  color: var(--color-icon-primary);
+}
+.nexus-tag-input__tag-close-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+.nexus-tag-input__input {
+  flex: 1;
+  min-width: 4rem;
+  border: none;
+  outline: none;
+  background: transparent;
+  font: inherit;
+  color: var(--color-text-primary);
+  padding: 0.125rem 0;
+}
+.nexus-tag-input__input::placeholder {
+  color: var(--color-text-muted);
+}
+.nexus-tag-input__description {
+  font-size: var(--text-text-xs, 0.75rem);
+  color: var(--color-text-secondary);
+}
+
+/* ═══════════════════════════════════════════
+     NxImage
+     ═══════════════════════════════════════════ */
+
+.nexus-image {
+  position: relative;
+  overflow: hidden;
+  display: block;
+  background: var(--color-surface-subtle);
+}
+.nexus-image__fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  min-height: 4rem;
+  color: var(--color-icon-muted);
+}
+.nexus-image__fallback-icon {
+  width: var(--size-icon-xl, 2rem);
+  height: var(--size-icon-xl, 2rem);
+}
+.nexus-image__skeleton {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, var(--color-surface-subtle) 25%, var(--color-surface-default) 50%, var(--color-surface-subtle) 75%);
+  background-size: 200% 100%;
+  animation: nexus-shimmer 1.5s infinite;
+}
+.nexus-image__img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  transition: opacity 300ms ease;
+}
+.nexus-image__img--loaded {
+  opacity: 1;
+}
+.nexus-image__img--cover {
+  object-fit: cover;
+}
+.nexus-image__img--contain {
+  object-fit: contain;
+}
+.nexus-image__img--fill {
+  object-fit: fill;
+}
+.nexus-image__img--none {
+  object-fit: none;
+}
+
+@keyframes nexus-shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+/* ═══════════════════════════════════════════
+     DatePicker / Calendar
+     ═══════════════════════════════════════════ */
+
+.nexus-datepicker {
+  position: relative;
+  display: inline-block;
+}
+.nexus-datepicker__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-gap-sm, 0.5rem);
+  padding: var(--spacing-padding-xs, 0.5rem) var(--spacing-padding-sm, 0.75rem);
+  border: var(--border-width-stroke-default, 1px) solid var(--color-border-default);
+  border-radius: var(--radius-corner-md, 0.5rem);
+  background: var(--color-surface-default);
+  font: inherit;
+  font-size: var(--text-text-sm, 0.875rem);
+  color: var(--color-text-primary);
+  cursor: pointer;
+  transition: border-color 150ms;
+  min-width: 10rem;
+}
+.nexus-datepicker__trigger:hover {
+  border-color: var(--color-border-default-hover);
+}
+.nexus-datepicker__trigger:disabled {
+  opacity: var(--opacity-disabled-element, 0.4);
+  cursor: not-allowed;
+}
+.nexus-datepicker__trigger--placeholder span {
+  color: var(--color-text-muted);
+}
+.nexus-datepicker__icon {
+  width: var(--size-icon-sm, 1rem);
+  height: var(--size-icon-sm, 1rem);
+  flex-shrink: 0;
+  color: var(--color-icon-secondary);
+}
+.nexus-datepicker__popover {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  z-index: var(--z-index-layer-popover, 30);
+  background: var(--color-surface-default);
+  border: var(--border-width-stroke-default, 1px) solid var(--color-border-default);
+  border-radius: var(--radius-corner-lg, 0.75rem);
+  box-shadow: var(--shadow-lg, 0 2px 8px -1px rgb(0 0 0 / 0.12));
+  padding: var(--spacing-padding-sm, 0.75rem);
+  animation: nexus-fade-in 150ms ease;
+}
+
+.nexus-calendar {
+  font-size: var(--text-text-sm, 0.875rem);
+}
+.nexus-calendar__months {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-sm, 0.5rem);
+}
+.nexus-calendar__caption {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--spacing-padding-2xs, 0.25rem) 0;
+  font-weight: var(--font-weight-text-semibold-sm, 600);
+  color: var(--color-text-primary);
+}
+.nexus-calendar__nav {
+  display: flex;
+  gap: var(--spacing-gap-xs, 0.25rem);
+}
+.nexus-calendar__nav-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-control-sm, 2rem);
+  height: var(--size-control-sm, 2rem);
+  border: none;
+  background: transparent;
+  border-radius: var(--radius-corner-sm, 0.25rem);
+  cursor: pointer;
+  color: var(--color-icon-secondary);
+  transition: background 150ms;
+}
+.nexus-calendar__nav-btn:hover {
+  background: var(--color-surface-default-hover);
+}
+.nexus-calendar__grid {
+  width: 100%;
+  border-collapse: collapse;
+}
+.nexus-calendar__head-row {
+  display: flex;
+}
+.nexus-calendar__head-cell {
+  width: var(--size-control-sm, 2rem);
+  text-align: center;
+  font-size: var(--text-text-xs, 0.75rem);
+  font-weight: var(--font-weight-text-medium-xs, 500);
+  color: var(--color-text-tertiary);
+  padding: var(--spacing-padding-2xs, 0.25rem) 0;
+}
+.nexus-calendar__row {
+  display: flex;
+}
+.nexus-calendar__cell {
+  text-align: center;
+}
+.nexus-calendar__day {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-control-sm, 2rem);
+  height: var(--size-control-sm, 2rem);
+  border: none;
+  background: transparent;
+  border-radius: var(--radius-corner-sm, 0.25rem);
+  cursor: pointer;
+  font: inherit;
+  font-size: var(--text-text-sm, 0.875rem);
+  color: var(--color-text-primary);
+  transition: background 150ms, color 150ms;
+}
+.nexus-calendar__day:hover {
+  background: var(--color-surface-default-hover);
+}
+.nexus-calendar__day--selected {
+  background: var(--color-accent-primary);
+  color: var(--color-accent-on-primary);
+}
+.nexus-calendar__day--selected:hover {
+  background: var(--color-accent-primary-hover);
+}
+.nexus-calendar__day--today {
+  font-weight: var(--font-weight-text-semibold-sm, 600);
+  border: var(--border-width-stroke-default, 1px) solid var(--color-accent-primary);
+}
+.nexus-calendar__day--outside {
+  color: var(--color-text-muted);
+  opacity: 0.5;
+}
+.nexus-calendar__day--disabled {
+  color: var(--color-text-muted);
+  opacity: var(--opacity-disabled-element, 0.4);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+@keyframes nexus-fade-in {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}