juxscript 1.1.172 → 1.1.173

package/lib/styles/shadcn.css

@@ -1,1109 +1,211 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 
-  * {
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  }
-/* Tabs */
-
-.jux-tabs-list {
-  display: inline-flex;
-  height: 40px; /* h-10 */
-  align-items: center;
-  justify-content: center;
-  border-radius: 0.375rem; /* rounded-md */
-  background-color: #f4f4f5; /* bg-muted */
-  padding: 0.25rem; /* p-1 */
-  color: #71717a; /* text-muted-foreground */
-  border: none;
-}
-
-.jux-tabs-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  white-space: nowrap;
-  border-radius: 0.125rem; /* rounded-sm */
-  padding: 0.375rem 0.75rem; /* px-3 py-1.5 */
-  font-size: 0.875rem; /* text-sm */
-  font-weight: 500; /* font-medium */
-  color: #71717a;
-  cursor: pointer;
-  border: none;
-  background: transparent;
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 0.15s;
-  user-select: none;
-}
-
-/* Focus visible state mimicking ring-offset-background focus-visible:ring-2 ... */
-.jux-tabs-button:focus-visible {
-  outline: 2px solid #18181b; /* ring-ring */
-  outline-offset: 2px;
-}
-
-.jux-tabs-button:disabled {
-  pointer-events: none;
-  opacity: 0.5;
-}
-
-.jux-tabs-button-active {
-  background-color: #ffffff; /* bg-background */
-  color: #09090b; /* text-foreground */
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
-}
-
-/* Content Panel */
-.jux-tabs-panel {
-  margin-top: 0.5rem; /* mt-2 */
-  border-radius: 0.375rem;
-  border: 1px solid #e4e4e7;
-  padding: 1.5rem;
-  /* ring-offset-background equivalent if focused */
-}
-.jux-tabs-panel:focus-visible {
-  outline: 2px solid #18181b;
-  outline-offset: 2px;
-}
-
-/* Modal Overlay */
-.jux-modal-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 50;
-  background-color: rgba(0, 0, 0, 0.8); /* bg-black/80 */
-  backdrop-filter: blur(2px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Modal Container */
-.jux-modal {
-  position: relative;
-  background-color: #ffffff; /* bg-background */
-  border: 1px solid #e4e4e7; /* border */
-  border-radius: 0.5rem; /* rounded-lg */
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* lg:shadow-lg */
-  width: 100%;
-  max-width: 32rem; /* lg:max-w-lg default */
-  z-index: 51;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  padding: 1.5rem; /* p-6 */
-}
-
-.jux-modal-small { max-width: 24rem; }
-.jux-modal-medium { max-width: 32rem; }
-.jux-modal-large { max-width: 48rem; }
-
-/* Header */
-.jux-modal-header {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.75rem;
-  padding: 0;
-  text-align: left;
-}
-
-.jux-modal-header-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  color: #09090b;
-  margin-top: 0.125rem;
-}
-
-.jux-modal-header-title {
-  flex: 1;
-  font-size: 1.125rem; /* text-lg */
-  font-weight: 600; /* font-semibold */
-  line-height: 1.2;
-  color: #09090b; /* text-foreground */
-}
-
-/* Body / Content */
-.jux-modal-content {
-  padding: 0;
-  font-size: 0.875rem; /* text-sm */
-  color: #71717a; /* text-muted-foreground */
-  line-height: 1.5;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-/* Input Fields */
-.jux-input {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  width: 100%;
-}
-
-.jux-input-label {
-  font-size: 0.875rem; /* text-sm */
-  font-weight: 500; /* font-medium */
-  color: #09090b;
-  line-height: 1;
-}
-
-.jux-input-container {
-  position: relative;
-  width: 100%;
-}
-
-.jux-input-element {
-  display: flex;
-  height: 2.5rem; /* h-10 */
-  width: 100%;
-  border-radius: 0.375rem; /* rounded-md */
-  border: 1px solid #e4e4e7; /* border-input */
-  background-color: #ffffff; /* bg-background */
-  padding: 0.5rem 0.75rem; /* px-3 py-2 */
-  font-size: 0.875rem; /* text-sm */
-  color: #09090b;
-  outline: none;
-  transition: all 0.15s ease;
-  box-sizing: border-box;
-}
-
-.jux-input-element::placeholder {
-  color: #71717a; /* text-muted-foreground */
-}
-
-.jux-input-element:focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  border-color: #18181b; /* focus-visible:ring-ring */
-  box-shadow: 0 0 0 2px #18181b, 0 0 0 4px rgba(24, 24, 27, 0.1);
-}
-
-.jux-input-element:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.jux-input-error {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: #ef4444; /* text-destructive */
-}
-
-/* Footer with Actions */
-.jux-modal-footer {
-  padding: 0;
-  padding-top: 0.5rem;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  gap: 0.5rem; /* space-x-2 */
-  flex-wrap: wrap;
-}
-
-/* Modal Action Buttons */
-.jux-modal-action {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  white-space: nowrap;
-  border-radius: 0.375rem; /* rounded-md */
-  font-size: 0.875rem; /* text-sm */
-  font-weight: 500; /* font-medium */
-  height: 2.5rem; /* h-10 */
-  padding: 0 1rem; /* px-4 py-2 */
-  cursor: pointer;
-  transition: all 0.15s ease;
-  border: 1px solid transparent;
-}
-
-/* Ghost variant */
-.jux-modal-action-ghost {
-  background-color: transparent;
-  color: #09090b;
-  border: none;
-}
-.jux-modal-action-ghost:hover {
-  background-color: #f4f4f5;
-  color: #18181b;
-}
-
-/* Secondary/Outline variant */
-.jux-modal-action-secondary {
-  border: 1px solid #e4e4e7; /* border-input */
-  background-color: #ffffff; /* bg-background */
-  color: #09090b;
-}
-.jux-modal-action-secondary:hover {
-  background-color: #f4f4f5; /* hover:bg-accent */
-  color: #18181b;
-}
-
-/* Primary variant */
-.jux-modal-action-primary {
-  background-color: #18181b; /* bg-primary */
-  color: #fafafa; /* text-primary-foreground */
-  border: none;
-}
-.jux-modal-action-primary:hover {
-  background-color: #27272a; /* hover:bg-primary/90 */
-}
-
-/* Destructive variant */
-.jux-modal-action-destructive {
-  background-color: #ef4444; /* bg-destructive */
-  color: #ffffff;
-  border: none;
-}
-.jux-modal-action-destructive:hover {
-  background-color: #dc2626; /* hover:bg-destructive/90 */
-}
-
-/* Close Button (X) */
-.jux-modal-close {
-  position: absolute;
-  top: 1rem; /* top-4 */
-  right: 1rem; /* right-4 */
-  border-radius: 0.125rem; /* rounded-sm */
-  opacity: 0.7;
-  transition: opacity 0.15s ease;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  color: #71717a;
-  padding: 0.25rem;
-  width: 1.5rem;
-  height: 1.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.25rem;
-  line-height: 1;
-}
-
-.jux-modal-close:hover {
-  opacity: 1;
-  color: #09090b;
-}
-
-.jux-modal-close:focus-visible {
-   outline: 2px solid #18181b; /* ring-ring */
-   outline-offset: 2px;
-}
-
-/* Trigger Buttons (outside modal) */
-button.jux-button,
-.jux-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  white-space: nowrap;
-  border-radius: 0.375rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  height: 2.5rem;
-  padding: 0 1rem;
-  cursor: pointer;
-  transition: all 0.15s ease;
-  border: 1px solid transparent;
-  margin: 0.25rem;
-}
-
-/* Button variants for triggers */
-.jux-button-primary {
-  background-color: #18181b;
-  color: #fafafa;
-}
-.jux-button-primary:hover {
-  background-color: #27272a;
-}
-
-.jux-button-outline {
-  border: 1px solid #e4e4e7;
-  background-color: #ffffff;
-  color: #09090b;
-}
-.jux-button-outline:hover {
-  background-color: #f4f4f5;
-  color: #18181b;
-}
-
-button.jux-button:focus-visible,
-.jux-button:focus-visible {
-  outline: 2px solid #18181b;
-  outline-offset: 2px;
-}
-
-/* Typography Styles */
-
-/* Headings */
-h1, .jux-heading-1 {
-  scroll-margin: 5rem; /* scroll-m-20 */
-  font-size: 2.25rem; /* text-4xl */
-  font-weight: 800; /* font-extrabold */
-  letter-spacing: -0.025em; /* tracking-tight */
-  text-wrap: balance;
-}
-
-h2, .jux-heading-2 {
-  scroll-margin: 5rem; /* scroll-m-20 */
-  border-bottom: 1px solid #e4e4e7;
-  padding-bottom: 0.5rem; /* pb-2 */
-  font-size: 1.875rem; /* text-3xl */
-  font-weight: 600; /* font-semibold */
-  letter-spacing: -0.025em; /* tracking-tight */
-  transition-property: color;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 0.15s;
-}
-
-h2:first-child, .jux-heading-2:first-child {
-  margin-top: 0;
-}
-
-h3, .jux-heading-3 {
-  scroll-margin: 5rem; /* scroll-m-20 */
-  font-size: 1.5rem; /* text-2xl */
-  font-weight: 600; /* font-semibold */
-  letter-spacing: -0.025em; /* tracking-tight */
-}
-
-h4, .jux-heading-4 {
-  scroll-margin: 5rem; /* scroll-m-20 */
-  font-size: 1.25rem; /* text-xl */
-  font-weight: 600; /* font-semibold */
-  letter-spacing: -0.025em; /* tracking-tight */
-}
-
-h5, .jux-heading-5 {
-  scroll-margin: 5rem;
-  font-size: 1.125rem; /* text-lg */
-  font-weight: 600; /* font-semibold */
-  letter-spacing: -0.025em;
-}
-
-h6, .jux-heading-6 {
-  scroll-margin: 5rem;
-  font-size: 1rem; /* text-base */
-  font-weight: 600; /* font-semibold */
-  letter-spacing: -0.025em;
-}
-
-/* Paragraph */
-p, .jux-paragraph {
-  line-height: 1.75; /* leading-7 */
-}
-
-p:not(:first-child), .jux-paragraph:not(:first-child) {
-  margin-top: 1.5rem; /* mt-6 */
-}
-
-/* Lead Text */
-.jux-lead {
-  font-size: 1.25rem; /* text-xl */
-  color: #71717a; /* text-muted-foreground */
-}
-
-/* Large Text */
-.jux-large {
-  font-size: 1.125rem; /* text-lg */
-  font-weight: 600; /* font-semibold */
-}
-
-/* Small Text */
-small, .jux-small {
-  font-size: 0.875rem; /* text-sm */
-  font-weight: 500; /* font-medium */
-  line-height: 1;
-}
-
-/* Muted Text */
-.jux-muted {
-  font-size: 0.875rem; /* text-sm */
-  color: #71717a; /* text-muted-foreground */
-}
-
-/* Blockquote */
-blockquote, .jux-blockquote {
-  margin-top: 1.5rem; /* mt-6 */
-  border-left: 2px solid #e4e4e7; /* border-l-2 */
-  padding-left: 1.5rem; /* pl-6 */
-  font-style: italic;
-}
-
-/* Inline Code */
-code, .jux-inline-code {
-  position: relative;
-  border-radius: 0.25rem; /* rounded */
-  background-color: #f4f4f5; /* bg-muted */
-  padding: 0.15rem 0.3rem; /* px-[0.3rem] py-[0.2rem] */
-  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
-  font-size: 0.875rem; /* text-sm */
-  font-weight: 600; /* font-semibold */
-}
-
-/* Lists */
-ul, .jux-list {
-  margin-top: 1.5rem; /* my-6 */
-  margin-bottom: 1.5rem;
-  margin-left: 1.5rem; /* ml-6 */
-  list-style-type: disc; /* list-disc */
-}
-
-ol, .jux-list-ordered {
-  margin-top: 1.5rem;
-  margin-bottom: 1.5rem;
-  margin-left: 1.5rem;
-  list-style-type: decimal;
-}
-
-ul > li, ol > li,
-.jux-list > li, .jux-list-ordered > li {
-  margin-top: 0.5rem; /* mt-2 */
-}
-
-/* Table */
-table, .jux-table {
-  margin-top: 1.5rem; /* my-6 */
-  margin-bottom: 1.5rem;
-  width: 100%;
-  overflow-y: auto;
-}
-
-table thead tr, .jux-table thead tr {
-  margin: 0;
-  border-top: 1px solid #e4e4e7; /* border-t */
-  padding: 0;
-}
-
-table thead tr:nth-child(even),
-.jux-table thead tr:nth-child(even) {
-  background-color: #f4f4f5; /* even:bg-muted */
-}
-
-table tbody tr, .jux-table tbody tr {
-  margin: 0;
-  border-top: 1px solid #e4e4e7;
-  padding: 0;
-}
-
-table tbody tr:nth-child(even),
-.jux-table tbody tr:nth-child(even) {
-  background-color: #f4f4f5; /* even:bg-muted */
-}
-
-table th, .jux-table th {
-  border: 1px solid #e4e4e7;
-  padding: 0.5rem 1rem; /* px-4 py-2 */
-  text-align: left;
-  font-weight: 700; /* font-bold */
-}
-
-table th[align="center"],
-.jux-table th[align="center"] {
-  text-align: center;
-}
-
-table th[align="right"],
-.jux-table th[align="right"] {
-  text-align: right;
-}
-
-table td, .jux-table td {
-  border: 1px solid #e4e4e7;
-  padding: 0.5rem 1rem; /* px-4 py-2 */
-  text-align: left;
-}
-
-table td[align="center"],
-.jux-table td[align="center"] {
-  text-align: center;
-}
-
-table td[align="right"],
-.jux-table td[align="right"] {
-  text-align: right;
-}
-
-/* Horizontal Rule / Divider */
-hr, .jux-hr {
-  margin-top: 1.5rem;
-  margin-bottom: 1.5rem;
-  border: none;
-  border-top: 1px solid #e4e4e7;
-}
-
-/* Card Styles */
-
-.jux-card {
-  border-radius: 0.5rem; /* rounded-lg */
-  border: 1px solid #e4e4e7; /* border */
-  background-color: #ffffff; /* bg-card */
-  color: #09090b; /* text-card-foreground */
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
-  overflow: hidden;
-  transition: all 0.15s ease;
-}
-
-.jux-card-hoverable {
-  cursor: pointer;
-}
-
-.jux-card-hoverable:hover {
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
-  border-color: #d4d4d8; /* hover:border-muted */
-}
-
-.jux-card-header {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 0.75rem; /* space-x-3 */
-  padding: 1.5rem; /* p-6 */
-  background-color: #fafafa; /* bg-muted/50 */
-  border-bottom: 1px solid #e4e4e7;
-}
-
-.jux-card-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 2.5rem; /* w-10 */
-  height: 2.5rem; /* h-10 */
-  border-radius: 0.375rem; /* rounded-md */
-  background-color: #f4f4f5; /* bg-muted */
-  color: #18181b; /* text-foreground */
-  font-size: 1.25rem; /* text-xl */
-}
-
-.jux-card-title {
-  flex: 1;
-  font-size: 1.125rem; /* text-lg */
-  font-weight: 600; /* font-semibold */
-  line-height: 1.2;
-  color: #09090b; /* text-foreground */
-  margin: 0;
-}
-
-.jux-card-body {
-  padding: 1.5rem; /* p-6 */
-  font-size: 0.875rem; /* text-sm */
-  line-height: 1.5;
-  color: #71717a; /* text-muted-foreground */
-}
-
-.jux-card-footer {
-  display: flex;
-  align-items: center;
-  padding: 1.5rem; /* p-6 */
-  padding-top: 1rem; /* pt-4 */
-  border-top: 1px solid #e4e4e7;
-  background-color: #fafafa; /* bg-muted/50 */
-  gap: 0.5rem;
-}
-
-/* Card variants */
-.jux-card-compact .jux-card-header,
-.jux-card-compact .jux-card-body,
-.jux-card-compact .jux-card-footer {
-  padding: 1rem; /* p-4 */
-}
-
-.jux-card-flush .jux-card-header {
-  background-color: transparent;
-  border-bottom: none;
-}
-
-.jux-card-flush .jux-card-footer {
-  background-color: transparent;
-  border-top: none;
-}
-
-/* ═══════════════════════════════════════════════════════════════════
- * BUTTON SIZE VARIANTS
- * ═══════════════════════════════════════════════════════════════════ */
-
-/* Extra Small */
-button.jux-button-xs,
-.jux-button-xs {
-  height: 2rem; /* h-8 */
-  padding: 0 0.75rem; /* px-3 */
-  font-size: 0.75rem; /* text-xs */
-  border-radius: 0.25rem; /* rounded-sm */
-}
-
-/* Small */
-button.jux-button-sm,
-.jux-button-sm {
-  height: 2.25rem; /* h-9 */
-  padding: 0 0.875rem; /* px-3.5 */
-  font-size: 0.8125rem; /* text-xs/sm */
-  border-radius: 0.3125rem;
-}
-
-/* Default/Medium (already defined above) */
-button.jux-button,
-.jux-button {
-  height: 2.5rem; /* h-10 */
-  padding: 0 1rem; /* px-4 */
-  font-size: 0.875rem; /* text-sm */
-  border-radius: 0.375rem; /* rounded-md */
-}
-
-/* Large */
-button.jux-button-lg,
-.jux-button-lg {
-  height: 2.75rem; /* h-11 */
-  padding: 0 1.25rem; /* px-5 */
-  font-size: 0.9375rem; /* text-base */
-  border-radius: 0.375rem; /* rounded-md */
-}
-
-/* Extra Large */
-button.jux-button-xl,
-.jux-button-xl {
-  height: 3rem; /* h-12 */
-  padding: 0 1.5rem; /* px-6 */
-  font-size: 1rem; /* text-base */
-  border-radius: 0.5rem; /* rounded-lg */
-  font-weight: 600; /* font-semibold */
-}
-
-/* 2X Large */
-button.jux-button-2xl,
-.jux-button-2xl {
-  height: 3.5rem; /* h-14 */
-  padding: 0 2rem; /* px-8 */
-  font-size: 1.125rem; /* text-lg */
-  border-radius: 0.5rem; /* rounded-lg */
-  font-weight: 600; /* font-semibold */
-}
-
-/* 3X Large */
-button.jux-button-3xl,
-.jux-button-3xl {
-  height: 4rem; /* h-16 */
-  padding: 0 2.5rem; /* px-10 */
-  font-size: 1.25rem; /* text-xl */
-  border-radius: 0.625rem; /* rounded-xl */
-  font-weight: 600; /* font-semibold */
-}
-
-/* ═══════════════════════════════════════════════════════════════════
- * BUTTON VARIANTS (work with all sizes)
- * ═══════════════════════════════════════════════════════════════════ */
-
-/* Default/Primary */
-.jux-button-default,
-.jux-button-primary {
-  background-color: #18181b; /* bg-primary */
-  color: #fafafa; /* text-primary-foreground */
-  border: none;
-}
-.jux-button-default:hover,
-.jux-button-primary:hover {
-  background-color: #27272a; /* hover:bg-primary/90 */
-}
-
-/* Secondary */
-.jux-button-secondary {
-  background-color: #f4f4f5; /* bg-secondary */
-  color: #09090b; /* text-secondary-foreground */
-  border: none;
-}
-.jux-button-secondary:hover {
-  background-color: #e4e4e7; /* hover:bg-secondary/80 */
-}
-
-/* Destructive */
-.jux-button-destructive {
-  background-color: #ef4444; /* bg-destructive */
-  color: #ffffff; /* text-destructive-foreground */
-  border: none;
-}
-.jux-button-destructive:hover {
-  background-color: #dc2626; /* hover:bg-destructive/90 */
-}
-
-/* Outline */
-.jux-button-outline {
-  border: 1px solid #e4e4e7; /* border-input */
-  background-color: #ffffff; /* bg-background */
-  color: #09090b; /* text-foreground */
-}
-.jux-button-outline:hover {
-  background-color: #f4f4f5; /* hover:bg-accent */
-  color: #18181b; /* hover:text-accent-foreground */
-}
-
-/* Ghost */
-.jux-button-ghost {
-  background-color: transparent;
-  color: #09090b;
-  border: none;
-}
-.jux-button-ghost:hover {
-  background-color: #f4f4f5; /* hover:bg-accent */
-  color: #18181b; /* hover:text-accent-foreground */
-}
-
-/* Link */
-.jux-button-link {
-  background-color: transparent;
-  color: #18181b; /* text-primary */
-  text-decoration: underline;
-  text-underline-offset: 4px;
-  border: none;
-  padding: 0;
-  height: auto;
-}
-.jux-button-link:hover {
-  text-decoration: none;
-}
-
-/* ═══════════════════════════════════════════════════════════════════
- * ICON BUTTONS (Square variants)
- * ═══════════════════════════════════════════════════════════════════ */
-
-.jux-button-icon {
-  padding: 0;
-  aspect-ratio: 1 / 1;
-}
-
-.jux-button-icon.jux-button-xs {
-  width: 2rem;
-  height: 2rem;
-}
-
-.jux-button-icon.jux-button-sm {
-  width: 2.25rem;
-  height: 2.25rem;
-}
-
-.jux-button-icon {
-  width: 2.5rem;
-  height: 2.5rem;
-}
-
-.jux-button-icon.jux-button-lg {
-  width: 2.75rem;
-  height: 2.75rem;
-}
-
-.jux-button-icon.jux-button-xl {
-  width: 3rem;
-  height: 3rem;
-}
-
-.jux-button-icon.jux-button-2xl {
-  width: 3.5rem;
-  height: 3.5rem;
-}
-
-.jux-button-icon.jux-button-3xl {
-  width: 4rem;
-  height: 4rem;
-}
-
-/* ═══════════════════════════════════════════════════════════════════
- * BUTTON STATES
- * ═══════════════════════════════════════════════════════════════════ */
-
-button.jux-button:disabled,
-.jux-button:disabled {
-  pointer-events: none;
-  opacity: 0.5;
-}
-
-button.jux-button:focus-visible,
-.jux-button:focus-visible {
-  outline: 2px solid #18181b; /* ring-ring */
-  outline-offset: 2px;
-}
-
-button.jux-button:active,
-.jux-button:active {
-  transform: scale(0.98);
-}
-
-/* Loading state */
-.jux-button-loading {
-  position: relative;
-  color: transparent;
-  pointer-events: none;
-}
-
-.jux-button-loading::after {
-  content: '';
-  position: absolute;
-  width: 1rem;
-  height: 1rem;
-  top: 50%;
-  left: 50%;
-  margin-left: -0.5rem;
-  margin-top: -0.5rem;
-  border: 2px solid currentColor;
-  border-top-color: transparent;
-  border-radius: 50%;
-  animation: button-spin 0.6s linear infinite;
-  color: inherit;
-}
-
-@keyframes button-spin {
-  to { transform: rotate(360deg); }
-}
-
-/* ═══════════════════════════════════════════════════════════════════
- * DARK MODE
- * ═══════════════════════════════════════════════════════════════════ */
-
-.dark .jux-button-default,
-.dark .jux-button-primary {
-  background-color: #fafafa;
-  color: #18181b;
-}
-.dark .jux-button-default:hover,
-.dark .jux-button-primary:hover {
-  background-color: #e4e4e7;
-}
-
-.dark .jux-button-secondary {
-  background-color: #27272a;
-  color: #fafafa;
-}
-.dark .jux-button-secondary:hover {
-  background-color: #3f3f46;
-}
-
-.dark .jux-button-outline {
-  border-color: #27272a;
-  background-color: #09090b;
-  color: #fafafa;
-}
-.dark .jux-button-outline:hover {
-  background-color: #27272a;
-  color: #fafafa;
-}
-
-.dark .jux-button-ghost {
-  color: #fafafa;
-}
-.dark .jux-button-ghost:hover {
-  background-color: #27272a;
-  color: #fafafa;
-}
-
-.dark .jux-button-link {
-  color: #fafafa;
-}
-
-.dark .jux-button:focus-visible {
-  outline-color: #fafafa;
-}
-
-/* ═══════════════════════════════════════════════════════════════════
- * MENU STYLES (Shadcn Sidebar)
- * ═══════════════════════════════════════════════════════════════════ */
-
-/* Menu Container */
-.jux-menu,
-.jux-menu-vertical {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  width: 100%;
-  padding: 0.5rem;
-}
-
-/* Menu Items Wrapper */
-.jux-menu-items {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  width: 100%;
-}
-
-/* Individual Menu Item Container */
-.jux-menu-item-wrapper {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-/* Menu Link/Item */
-.jux-menu-link,
-.jux-menu-item {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.5rem 0.75rem;
-  border-radius: 0.375rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: #09090b;
-  cursor: pointer;
-  transition: background-color 0.15s;
-  text-decoration: none;
-  background: transparent;
-  border: none;
-  width: 100%;
-  text-align: left;
-}
-
-.jux-menu-link:hover,
-.jux-menu-item:hover {
-  background-color: #f4f4f5;
-}
-
-.jux-menu-link-active,
-.jux-menu-item-active {
-  background-color: #f4f4f5;
-  font-weight: 600;
-}
+/* ═══════════════════════════════════════════════════════════════════
+ * DESIGN TOKENS (Shadcn Variables)
+ * ═══════════════════════════════════════════════════════════════════ */
 
-/* Menu Label (text inside link) */
-.jux-menu-label {
-  flex: 1;
-  font-size: 0.875rem;
-  font-weight: inherit;
-  color: inherit;
+:root {
+  /* Base colors */
+  --background: 0 0% 100%;
+  --foreground: 0 0% 3.9%;
+  --muted: 0 0% 96.1%;
+  --muted-foreground: 0 0% 45.1%;
+  --border: 0 0% 89.8%;
+  --input: 0 0% 89.8%;
+  --ring: 0 0% 3.9%;
+  
+  /* Accent colors */
+  --primary: 0 0% 9%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 0 0% 96.1%;
+  --secondary-foreground: 0 0% 9%;
+  --accent: 0 0% 96.1%;
+  --accent-foreground: 0 0% 9%;
+  
+  /* Semantic colors */
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+  --success: 142 71% 45%;
+  --success-foreground: 0 0% 98%;
+  --warning: 48 96% 53%;
+  --warning-foreground: 0 0% 9%;
+  
+  /* Sizes */
+  --radius: 0.375rem;
+  
+  /* Font */
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+
+.dark {
+  --background: 0 0% 3.9%;
+  --foreground: 0 0% 98%;
+  --muted: 0 0% 14.9%;
+  --muted-foreground: 0 0% 63.9%;
+  --border: 0 0% 14.9%;
+  --input: 0 0% 14.9%;
+  --ring: 0 0% 83.1%;
+  --primary: 0 0% 98%;
+  --primary-foreground: 0 0% 9%;
+  --secondary: 0 0% 14.9%;
+  --secondary-foreground: 0 0% 98%;
+  --accent: 0 0% 14.9%;
+  --accent-foreground: 0 0% 98%;
 }
 
-/* Section Label (header text) */
-.jux-menu-section-label {
-  padding: 0.5rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: #71717a;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
+/* ═══════════════════════════════════════════════════════════════════
+ * BASE INPUT STYLING (Shared across all inputs)
+ * ═══════════════════════════════════════════════════════════════════ */
 
-/* Icon */
-.jux-menu-icon {
-  width: 1.25rem;
-  height: 1.25rem;
-  flex-shrink: 0;
+.jux-input-element,
+.jux-table-filter,
+.jux-dataframe-filter-input {
   display: flex;
-  align-items: center;
-  justify-content: center;
+  height: 2.5rem;
+  width: 100%;
+  border-radius: var(--radius);
+  border: 1px solid hsl(var(--input));
+  background: hsl(var(--background));
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  color: hsl(var(--foreground));
+  outline: none !important;
+  transition: all 0.15s ease;
+  box-sizing: border-box;
 }
 
-/* Chevron for expandable items */
-.jux-menu-chevron {
-  width: 1rem;
-  height: 1rem;
-  flex-shrink: 0;
-  margin-left: auto;
-  transition: transform 0.15s;
-  color: #71717a;
+.jux-input-element::placeholder,
+.jux-table-filter::placeholder,
+.jux-dataframe-filter-input::placeholder {
+  color: hsl(var(--muted-foreground));
 }
 
-.jux-menu-item-expanded .jux-menu-chevron {
-  transform: rotate(90deg);
+.jux-input-element:focus,
+.jux-table-filter:focus,
+.jux-dataframe-filter-input:focus {
+  border-color: hsl(var(--ring));
+  box-shadow: 0 0 0 1px hsl(var(--ring)) !important;
 }
 
-/* Submenu (indented) */
-.jux-menu-submenu {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-  margin-left: 2rem;
-  padding-left: 0.75rem;
-  border-left: 1px solid #e4e4e7;
-  margin-top: 0.125rem;
+.jux-input-element:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
-.jux-menu-submenu .jux-menu-link,
-.jux-menu-submenu .jux-menu-item {
-  padding: 0.375rem 0.75rem;
-  font-size: 0.8125rem;
-}
+/* ═══════════════════════════════════════════════════════════════════
+ * BUTTON BASE (Single source of truth)
+ * ═══════════════════════════════════════════════════════════════════ */
 
-/* User Section at Bottom */
-.jux-menu-user {
-  display: flex;
+.jux-button,
+.jux-modal-action,
+.jux-table-pagination button,
+.jux-fileupload-button,
+.jux-dropdown-trigger,
+.jux-dmenu-trigger {
+  display: inline-flex;
   align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem;
-  margin-top: auto;
-  border-top: 1px solid #e4e4e7;
-  border-radius: 0.375rem;
+  justify-content: center;
+  white-space: nowrap;
+  border-radius: var(--radius);
+  font-size: 0.875rem;
+  font-weight: 500;
+  height: 2.5rem;
+  padding: 0 1rem;
   cursor: pointer;
+  transition: all 0.15s ease;
+  border: 1px solid transparent;
+  background: hsl(var(--primary));
+  color: hsl(var(--primary-foreground));
 }
 
-.jux-menu-user:hover {
-  background-color: #f4f4f5;
+.jux-button:hover,
+.jux-modal-action:hover,
+.jux-table-pagination button:hover:not(:disabled),
+.jux-fileupload-button:hover,
+.jux-dropdown-trigger:hover,
+.jux-dmenu-trigger:hover {
+  opacity: 0.9;
 }
 
-.jux-menu-user-avatar {
-  width: 2rem;
-  height: 2rem;
-  border-radius: 50%;
-  flex-shrink: 0;
+.jux-button:focus-visible,
+.jux-modal-action:focus-visible,
+.jux-fileupload-button:focus-visible {
+  outline: 2px solid hsl(var(--ring));
+  outline-offset: 2px;
 }
 
-.jux-menu-user-info {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
+.jux-button:disabled,
+.jux-table-pagination button:disabled {
+  pointer-events: none;
+  opacity: 0.5;
 }
 
-.jux-menu-user-name {
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: #09090b;
+/* Button variants */
+.jux-button-outline,
+.jux-modal-action-secondary,
+.jux-fileupload-button {
+  border: 1px solid hsl(var(--input));
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
 }
 
-.jux-menu-user-email {
-  font-size: 0.75rem;
-  color: #71717a;
+.jux-button-outline:hover,
+.jux-modal-action-secondary:hover,
+.jux-fileupload-button:hover {
+  background: hsl(var(--accent));
 }
 
-/* Dark Mode */
-.dark .jux-menu-link,
-.dark .jux-menu-item {
-  color: #fafafa;
+.jux-button-ghost,
+.jux-modal-action-ghost {
+  background: transparent;
+  color: hsl(var(--foreground));
+  border: none;
 }
 
-.dark .jux-menu-link:hover,
-.dark .jux-menu-item:hover,
-.dark .jux-menu-link-active,
-.dark .jux-menu-item-active {
-  background-color: #27272a;
+.jux-button-ghost:hover,
+.jux-modal-action-ghost:hover {
+  background: hsl(var(--accent));
 }
 
-.dark .jux-menu-section-label {
-  color: #a1a1aa;
+.jux-button-destructive,
+.jux-modal-action-destructive {
+  background: hsl(var(--destructive));
+  color: hsl(var(--destructive-foreground));
 }
 
-.dark .jux-menu-submenu {
-  border-left-color: #27272a;
+.jux-button-destructive:hover,
+.jux-modal-action-destructive:hover {
+  opacity: 0.9;
 }
 
-.dark .jux-menu-user {
-  border-top-color: #27272a;
-}
+/* Button sizes */
+.jux-button-sm { height: 2.25rem; padding: 0 0.875rem; font-size: 0.8125rem; }
+.jux-button-lg { height: 2.75rem; padding: 0 1.25rem; font-size: 0.9375rem; }
+.jux-button-xl { height: 3rem; padding: 0 1.5rem; font-size: 1rem; font-weight: 600; }
 
-.dark .jux-menu-user:hover {
-  background-color: #27272a;
-}
+/* ═══════════════════════════════════════════════════════════════════
+ * TYPOGRAPHY (DRY headings)
+ * ═══════════════════════════════════════════════════════════════════ */
 
-.dark .jux-menu-user-name {
-  color: #fafafa;
+h1, h2, h3, h4, h5, h6,
+.jux-heading-1, .jux-heading-2, .jux-heading-3, .jux-heading-4, .jux-heading-5, .jux-heading-6 {
+  scroll-margin: 5rem;
+  font-weight: 600;
+  letter-spacing: -0.025em;
+  color: hsl(var(--foreground));
 }
 
-.dark .jux-menu-user-email {
-  color: #a1a1aa;
-}
+h1, .jux-heading-1 { font-size: 2.25rem; font-weight: 800; }
+h2, .jux-heading-2 { font-size: 1.875rem; border-bottom: 1px solid hsl(var(--border)); padding-bottom: 0.5rem; }
+h3, .jux-heading-3 { font-size: 1.5rem; }
+h4, .jux-heading-4 { font-size: 1.25rem; }
+h5, .jux-heading-5 { font-size: 1.125rem; }
+h6, .jux-heading-6 { font-size: 1rem; }
 
-.dark .jux-menu-chevron {
-  color: #a1a1aa;
-}
+p, .jux-paragraph { line-height: 1.75; }
+p:not(:first-child) { margin-top: 1.5rem; }
+
+.jux-muted { font-size: 0.875rem; color: hsl(var(--muted-foreground)); }
 
 /* ═══════════════════════════════════════════════════════════════════
  * DATAFRAME COMPONENT
@@ -1116,54 +218,42 @@ button.jux-button:active,
   width: 100%;
 }
 
-.jux-dataframe-upload {
-  margin-bottom: 0.25rem;
-}
-
 .jux-dataframe-status {
   display: flex;
   align-items: center;
   padding: 0.5rem 0.75rem;
   font-size: 0.8125rem;
   font-weight: 500;
-  border-radius: 0.375rem;
-  border: 1px solid #e4e4e7;
-  background: #fafafa;
-  color: #71717a;
-  transition: all 0.2s ease;
+  border-radius: var(--radius);
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--muted));
+  color: hsl(var(--muted-foreground));
 }
 
 .jux-dataframe-status-success {
-  background: #f0fdf4;
-  border-color: #bbf7d0;
-  color: #15803d;
+  background: hsl(var(--success) / 0.1);
+  border-color: hsl(var(--success) / 0.3);
+  color: hsl(var(--success));
 }
 
 .jux-dataframe-status-loading {
-  background: #fefce8;
-  border-color: #fde68a;
-  color: #a16207;
+  background: hsl(var(--warning) / 0.1);
+  border-color: hsl(var(--warning) / 0.3);
+  color: hsl(var(--warning));
 }
 
 .jux-dataframe-status-error {
-  background: #fef2f2;
-  border-color: #fecaca;
-  color: #dc2626;
-}
-
-.jux-dataframe-status-empty {
-  background: #fafafa;
-  border-color: #e4e4e7;
-  color: #a1a1aa;
+  background: hsl(var(--destructive) / 0.1);
+  border-color: hsl(var(--destructive) / 0.3);
+  color: hsl(var(--destructive));
 }
 
-/* DataFrame Filter */
 .jux-dataframe-filter {
   position: relative;
   display: flex;
   align-items: center;
   width: 100%;
-  margin-bottom: 0.75rem; /* Add spacing below filter */
+  margin-bottom: 0.75rem;
 }
 
 .jux-dataframe-filter-icon {
@@ -1171,7 +261,7 @@ button.jux-button:active,
   left: 0.75rem;
   top: 50%;
   transform: translateY(-50%);
-  color: #a1a1aa;
+  color: hsl(var(--muted-foreground));
   pointer-events: none;
   display: flex;
   align-items: center;
@@ -1180,87 +270,24 @@ button.jux-button:active,
 
 .jux-dataframe-filter-input {
   padding-left: 2.25rem !important;
-  /* ✅ Remove aggressive black outline, use subtle ring instead */
-  outline: none !important;
-}
-
-/* ✅ Fix focus state to match shadcn aesthetic */
-.jux-dataframe-filter-input:focus {
-  border-color: #18181b !important;
-  box-shadow: 0 0 0 1px #18181b !important;
-  outline: none !important;
-}
-
-/* ✅ Update dark mode filter focus */
-.dark .jux-dataframe-filter-input:focus {
-  border-color: #fafafa !important;
-  box-shadow: 0 0 0 1px #fafafa !important;
-  outline: none !important;
 }
 
 /* ═══════════════════════════════════════════════════════════════════
- * FILE UPLOAD (Shadcn styled)
+ * FILE UPLOAD
  * ═══════════════════════════════════════════════════════════════════ */
 
-.jux-fileupload {
-  gap: 0.5rem;
-}
-
-.jux-fileupload-button-container {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.jux-fileupload-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  white-space: nowrap;
-  border-radius: 0.375rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  height: 2.5rem;
-  padding: 0 1rem;
-  cursor: pointer;
-  transition: all 0.15s ease;
-  border: 1px solid #e4e4e7;
-  background: #ffffff;
-  color: #09090b;
-}
-
-.jux-fileupload-button:hover {
-  background: #f4f4f5;
-  color: #18181b;
-}
-
-.jux-fileupload-button:disabled {
-  pointer-events: none;
-  opacity: 0.5;
-}
-
-.jux-fileupload-icon {
-  display: flex;
-  align-items: center;
-  color: #71717a;
-}
-
-.jux-fileupload-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
+.jux-fileupload { gap: 0.5rem; }
 
 .jux-fileupload-item {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.375rem 0.75rem;
-  background: #f4f4f5;
-  border: 1px solid #e4e4e7;
-  border-radius: 0.375rem;
+  background: hsl(var(--muted));
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius);
   font-size: 0.8125rem;
-  color: #09090b;
+  color: hsl(var(--foreground));
 }
 
 .jux-fileupload-filename {
@@ -1272,60 +299,55 @@ button.jux-button:active,
 }
 
 .jux-fileupload-filesize {
-  color: #a1a1aa;
+  color: hsl(var(--muted-foreground));
   font-size: 0.75rem;
-  flex-shrink: 0;
 }
 
 .jux-fileupload-remove {
   background: transparent;
   border: none;
-  color: #a1a1aa;
+  color: hsl(var(--muted-foreground));
   cursor: pointer;
-  font-size: 1rem;
   padding: 0 0.25rem;
-  line-height: 1;
   border-radius: 0.25rem;
   transition: all 0.15s;
 }
 
 .jux-fileupload-remove:hover {
-  color: #ef4444;
-  background: #fef2f2;
+  color: hsl(var(--destructive));
+  background: hsl(var(--destructive) / 0.1);
 }
 
 /* ═══════════════════════════════════════════════════════════════════
- * TABLE ENHANCEMENTS
+ * TABLE
  * ═══════════════════════════════════════════════════════════════════ */
 
-.jux-table-wrapper {
+.jux-table-wrapper { width: 100%; overflow-x: auto; }
+
+.jux-table {
   width: 100%;
-  overflow-x: auto;
+  border-collapse: collapse;
 }
 
-.jux-table-filter {
-  display: flex;
-  height: 2.5rem;
-  width: 100%;
-  border-radius: 0.375rem;
-  border: 1px solid #e4e4e7;
-  background: #ffffff;
-  padding: 0.5rem 0.75rem;
-  font-size: 0.875rem;
-  color: #09090b;
-  outline: none;
-  transition: all 0.15s ease;
-  box-sizing: border-box;
-  margin-bottom: 0.75rem;
+.jux-table thead tr { border-top: 1px solid hsl(var(--border)); }
+.jux-table tbody tr { border-top: 1px solid hsl(var(--border)); }
+.jux-table-striped tbody tr:nth-child(even) { background: hsl(var(--muted)); }
+
+.jux-table th,
+.jux-table td {
+  border: 1px solid hsl(var(--border));
+  padding: 0.5rem 1rem;
+  text-align: left;
 }
 
-.jux-table-filter::placeholder {
-  color: #a1a1aa;
+.jux-table th { font-weight: 700; }
+
+.jux-table-hoverable tbody tr {
+  transition: background-color 0.1s ease;
 }
 
-.jux-table-filter:focus {
-  border-color: #18181b;
-  box-shadow: 0 0 0 2px #18181b, 0 0 0 4px rgba(24, 24, 27, 0.1);
+.jux-table-hoverable tbody tr:hover {
+  background: hsl(var(--accent)) !important;
 }
 
 .jux-table-pagination {
@@ -1337,142 +359,220 @@ button.jux-button:active,
   padding: 0.5rem 0;
 }
 
-.jux-table-pagination button {
-  display: inline-flex;
+.jux-table-pagination span {
+  font-size: 0.875rem;
+  color: hsl(var(--muted-foreground));
+  padding: 0 0.75rem;
+}
+
+/* ═══════════════════════════════════════════════════════════════════
+ * MODAL
+ * ═══════════════════════════════════════════════════════════════════ */
+
+.jux-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(2px);
+  display: flex;
   align-items: center;
   justify-content: center;
-  white-space: nowrap;
-  border-radius: 0.375rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  height: 2.25rem;
-  padding: 0 0.875rem;
-  cursor: pointer;
-  transition: all 0.15s ease;
-  border: 1px solid #e4e4e7;
-  background: #ffffff;
-  color: #09090b;
 }
 
-.jux-table-pagination button:hover:not(:disabled) {
-  background: #f4f4f5;
-  color: #18181b;
+.jux-modal {
+  position: relative;
+  background: hsl(var(--background));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.5rem;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  width: 100%;
+  max-width: 32rem;
+  z-index: 51;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1.5rem;
 }
 
-.jux-table-pagination button:disabled {
-  pointer-events: none;
-  opacity: 0.5;
+.jux-modal-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
 }
 
-.jux-table-pagination span {
-  font-size: 0.875rem;
-  color: #71717a;
-  padding: 0 0.75rem;
+.jux-modal-header-title {
+  flex: 1;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: hsl(var(--foreground));
 }
 
-/* Table hoverable rows */
-.jux-table-hoverable tbody tr {
-  transition: background-color 0.1s ease;
+.jux-modal-content {
+  font-size: 0.875rem;
+  color: hsl(var(--muted-foreground));
+  line-height: 1.5;
 }
 
-.jux-table-hoverable tbody tr:hover {
-  background-color: #f4f4f5 !important;
+.jux-modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
 }
 
-/* Selection highlight override for shadcn */
-.jux-table-row-selected {
-  background-color: #eff6ff !important;
+.jux-modal-close {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: hsl(var(--muted-foreground));
+  padding: 0.25rem;
 }
 
-.jux-table-row-selected:hover {
-  background-color: #dbeafe !important;
+.jux-modal-close:hover {
+  color: hsl(var(--foreground));
 }
 
 /* ═══════════════════════════════════════════════════════════════════
- * DARK MODE - DATAFRAME / FILEUPLOAD / TABLE
+ * TABS
  * ═══════════════════════════════════════════════════════════════════ */
 
-.dark .jux-dataframe-status {
-  background: #18181b;
-  border-color: #27272a;
-  color: #a1a1aa;
+.jux-tabs-list {
+  display: inline-flex;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius);
+  background: hsl(var(--muted));
+  padding: 0.25rem;
 }
 
-.dark .jux-dataframe-status-success {
-  background: #052e16;
-  border-color: #166534;
-  color: #4ade80;
+.jux-tabs-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  border-radius: calc(var(--radius) - 2px);
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: hsl(var(--muted-foreground));
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  transition: all 0.15s;
 }
 
-.dark .jux-dataframe-status-loading {
-  background: #422006;
-  border-color: #a16207;
-  color: #facc15;
+.jux-tabs-button-active {
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
-.dark .jux-dataframe-status-error {
-  background: #450a0a;
-  border-color: #991b1b;
-  color: #f87171;
+.jux-tabs-panel {
+  margin-top: 0.5rem;
+  border-radius: var(--radius);
+  border: 1px solid hsl(var(--border));
+  padding: 1.5rem;
 }
 
-.dark .jux-fileupload-button {
-  border-color: #27272a;
-  background: #09090b;
-  color: #fafafa;
-}
+/* ═══════════════════════════════════════════════════════════════════
+ * CARD
+ * ═══════════════════════════════════════════════════════════════════ */
 
-.dark .jux-fileupload-button:hover {
-  background: #27272a;
+.jux-card {
+  border-radius: 0.5rem;
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--background));
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
 }
 
-.dark .jux-fileupload-item {
-  background: #18181b;
-  border-color: #27272a;
-  color: #fafafa;
+.jux-card-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1.5rem;
+  background: hsl(var(--muted) / 0.5);
+  border-bottom: 1px solid hsl(var(--border));
 }
 
-.dark .jux-fileupload-filesize {
-  color: #71717a;
+.jux-card-title {
+  flex: 1;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: hsl(var(--foreground));
 }
 
-.dark .jux-table-filter {
-  border-color: #27272a;
-  background: #09090b;
-  color: #fafafa;
+.jux-card-body {
+  padding: 1.5rem;
+  font-size: 0.875rem;
+  color: hsl(var(--muted-foreground));
 }
 
-.dark .jux-table-filter::placeholder {
-  color: #52525b;
-}
+/* ═══════════════════════════════════════════════════════════════════
+ * DROPDOWN MENU
+ * ═══════════════════════════════════════════════════════════════════ */
 
-.dark .jux-table-filter:focus {
-  border-color: #fafafa;
-  box-shadow: 0 0 0 2px #fafafa, 0 0 0 4px rgba(250, 250, 250, 0.1);
-}
+.jux-dmenu-wrapper { position: relative; display: inline-block; }
 
-.dark .jux-table-pagination button {
-  border-color: #27272a;
-  background: #09090b;
-  color: #fafafa;
+.jux-dmenu-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  min-width: 220px;
+  padding: 4px;
+  border-radius: 0.5rem;
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--background));
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  z-index: 100;
+  display: none;
+  flex-direction: column;
 }
 
-.dark .jux-table-pagination button:hover:not(:disabled) {
-  background: #27272a;
+.jux-dmenu-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 6px 8px;
+  font-size: 0.875rem;
+  border-radius: 4px;
+  border: none;
+  background: transparent;
+  color: hsl(var(--foreground));
+  cursor: pointer;
+  transition: background 0.1s;
 }
 
-.dark .jux-table-pagination span {
-  color: #71717a;
+.jux-dmenu-item:hover {
+  background: hsl(var(--accent));
 }
 
-.dark .jux-table-hoverable tbody tr:hover {
-  background-color: #27272a !important;
+.jux-dmenu-sep {
+  height: 1px;
+  margin: 4px -4px;
+  background: hsl(var(--border));
 }
 
-.dark .jux-table-row-selected {
-  background-color: #172554 !important;
+/* ═══════════════════════════════════════════════════════════════════
+ * UTILITIES
+ * ═══════════════════════════════════════════════════════════════════ */
+
+hr, .jux-hr {
+  margin: 1.5rem 0;
+  border: none;
+  border-top: 1px solid hsl(var(--border));
 }
 
-.dark .jux-table-row-selected:hover {
-  background-color: #1e3a5f !important;
+code, .jux-inline-code {
+  border-radius: 0.25rem;
+  background: hsl(var(--muted));
+  padding: 0.15rem 0.3rem;
+  font-family: ui-monospace, monospace;
+  font-size: 0.875rem;
+  font-weight: 600;
 }