@nexus-cross/design-system 1.0.0

package/dist/styles.layered.css

@@ -0,0 +1,2404 @@
+@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, #fff);
+  --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: 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;
+}
+.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.375rem;
+}
+.nexus-text-input-field__label {
+  font-size: var(--text-text-xs, 0.75rem);
+  color: var(--color-text-secondary);
+  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-tertiary);
+  line-height: 1.4;
+}
+.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-tertiary);
+  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.375rem);
+  border: 1px solid var(--color-border-default);
+  background: var(--color-surface-default);
+  font-size: var(--text-text-sm, 0.875rem);
+  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) {
+  box-shadow: 0 0 0 0.5px var(--color-border-default);
+}
+.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;
+  opacity: 0.5;
+}
+
+/* ── Sizes ── */
+.nexus-text-input--xl {
+  height: 3.5rem;
+  padding-inline: var(--spacing-padding-lg, 1.25rem);
+  font-size: var(--text-text-base, 1rem);
+}
+.nexus-text-input--lg {
+  height: 3rem;
+  padding-inline: var(--spacing-padding-md, 1rem);
+  font-size: var(--text-text-base, 1rem);
+}
+.nexus-text-input--md {
+  height: 2.5rem;
+  padding-inline: var(--spacing-padding-sm, 0.75rem);
+  font-size: var(--text-text-sm, 0.875rem);
+}
+.nexus-text-input--sm {
+  height: 2rem;
+  padding-inline: 0.625rem;
+  font-size: var(--text-text-xs, 0.75rem);
+}
+
+/* ── Inner elements ── */
+.nexus-text-input__inner {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  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-tertiary);
+}
+.nexus-text-input__icon {
+  display: flex;
+  flex-shrink: 0;
+  color: var(--color-text-tertiary);
+}
+.nexus-text-input__clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: none;
+  background: transparent;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  padding: 0;
+  border-radius: var(--radius-corner-full, 9999px);
+  transition: color 150ms, background-color 150ms;
+}
+.nexus-text-input__clear:hover {
+  color: var(--color-text-secondary);
+  background-color: var(--color-surface-hover, rgba(0, 0, 0, 0.06));
+}
+
+/* ═══════════════════════════════════════════
+     TextArea
+     ═══════════════════════════════════════════ */
+
+.nexus-textarea {
+  border-radius: var(--radius-corner-md, 0.375rem);
+  border: 1px solid var(--color-border-default);
+  background: var(--color-surface-default);
+  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);
+  transition-property: border-color;
+  transition-duration: 200ms;
+  resize: none;
+}
+:where(.nexus-textarea) {
+  width: 100%;
+}
+.nexus-textarea::placeholder {
+  color: var(--color-text-tertiary);
+}
+.nexus-textarea:focus-visible {
+  outline: none;
+}
+.nexus-textarea:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.nexus-textarea--default:focus {
+  border-color: var(--color-text-primary);
+}
+.nexus-textarea--error {
+  border-color: var(--color-status-danger);
+}
+.nexus-textarea--error:focus {
+  border-color: var(--color-status-danger);
+}
+.nexus-textarea-wrap {
+  display: flex;
+  flex-direction: column;
+}
+.nexus-textarea-count {
+  margin-top: 0.25rem;
+  text-align: right;
+  font-size: var(--text-text-xs, 0.75rem);
+  color: var(--color-text-tertiary);
+}
+.nexus-textarea-count__current {
+  color: var(--color-text-primary);
+  font-weight: 500;
+}
+
+/* ═══════════════════════════════════════════
+     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;
+  background: transparent;
+  outline: none;
+}
+.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-inline: 0.375rem;
+  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: #fff;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  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: #fff;
+}
+.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;
+}
+.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;
+}
+
+/* ═══════════════════════════════════════════
+     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;
+}
+.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: #fff;
+  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;
+}
+.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: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+}
+.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-status-danger, #ef4444);
+  background: var(--color-bg-negative, #fef2f2);
+  color: var(--color-text-negative, #991b1b);
+  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);
+  color: var(--color-text-primary);
+  font-size: var(--text-text-sm, 0.875rem);
+  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: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  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;
+}
+
+/* ═══════════════════════════════════════════
+     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: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+}
+.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: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  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: rgba(0, 0, 0, 0.6);
+}
+.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-block: var(--spacing-padding-md, 1rem);
+  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: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  color: var(--color-text-primary);
+  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;
+  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: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  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;
+}
+.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;
+  }
+}
+
+}