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

package/dist/styles.layered.css

@@ -0,0 +1,3875 @@
+@layer nexus {
+/*
+ * @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); }
+}
+
+}