@shohojdhara/atomix 0.2.4 → 0.2.6

package/dist/atomix.css

@@ -1726,60 +1726,184 @@ a, a:hover {
   margin-left: calc(var(--atomix-avatar-size) * -1 * var(--atomix-avatar-group-stacked-overlap) / 100);
   z-index: 1;
 }
-.atomix-glass__layer, .atomix-glass__overlay, .atomix-glass__base, .atomix-glass__border-1, .atomix-glass__border-2 {
-  pointer-events: none;
+.c-atomix-glass {
+  position: relative;
+  --atomix-glass-radius: var(--atomix-radius-md, 16px);
+  --atomix-glass-transform: none;
+  --atomix-glass-transition: all var(--atomix-transition-duration, 0s) ease-out;
+  --atomix-glass-position: absolute;
+  --atomix-glass-container-width: 100%;
+  --atomix-glass-container-height: 100%;
+  --atomix-glass-border-width: var(--atomix-spacing-0-5, 0.09375rem);
+}
+.c-atomix-glass__hover-1, .c-atomix-glass__hover-2, .c-atomix-glass__hover-3, .c-atomix-glass__base, .c-atomix-glass__overlay {
   position: absolute;
   inset: 0;
-  border-radius: inherit;
-  transform: inherit;
-  transition: inherit;
+  pointer-events: none;
+  border-radius: var(--atomix-glass-radius);
+  transform: var(--atomix-glass-transform);
+  transition: var(--atomix-glass-transition);
+}
+.c-atomix-glass__hover-1, .c-atomix-glass__hover-2, .c-atomix-glass__hover-3 {
+  mix-blend-mode: overlay;
+  opacity: var(--atomix-glass-hover-1-opacity, 0);
+  background: var(--atomix-glass-hover-1-gradient, none);
+}
+.c-atomix-glass__hover-1 {
+  transition: opacity 0.2s ease-out;
+  opacity: var(--atomix-glass-hover-1-opacity, 0);
+  background: var(--atomix-glass-hover-1-gradient, none);
+}
+.c-atomix-glass__hover-2 {
+  transition: opacity 0.4s ease-out;
+  opacity: var(--atomix-glass-hover-2-opacity, 0);
+  background: var(--atomix-glass-hover-2-gradient, none);
+}
+.c-atomix-glass__hover-3 {
+  transition: opacity 0.6s ease-out;
+  opacity: var(--atomix-glass-hover-3-opacity, 0);
+  background: var(--atomix-glass-hover-3-gradient, none);
+}
+.c-atomix-glass__base {
+  mix-blend-mode: soft-light;
+  opacity: var(--atomix-glass-base-opacity, 0);
+  background: var(--atomix-glass-base-gradient, none);
+}
+.c-atomix-glass__overlay {
+  mix-blend-mode: overlay;
+  opacity: var(--atomix-glass-overlay-opacity, 0);
+  background: var(--atomix-glass-overlay-gradient, none);
+}
+.c-atomix-glass__overlay-highlight {
+  position: absolute;
+  inset: var(--atomix-spacing-0-5, 0.125rem);
+  pointer-events: none;
+  border-radius: var(--atomix-glass-radius);
+  transform: var(--atomix-glass-transform);
+  transition: var(--atomix-glass-transition);
+  mix-blend-mode: screen;
 }
-.atomix-glass__border-1, .atomix-glass__border-2 {
+.c-atomix-glass__border-1, .c-atomix-glass__border-2 {
+  padding: var(--atomix-glass-border-width);
   box-sizing: border-box;
-  padding: 1.5px;
-  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  overflow: hidden;
+  pointer-events: none;
+  -webkit-mask: linear-gradient(var(--atomix-black, #000000) 0 0) content-box, linear-gradient(var(--atomix-black, #000000) 0 0);
   -webkit-mask-composite: xor;
-  mask-composite: exclude;
-  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.5) inset, 0 1px 3px rgba(255, 255, 255, 0.25) inset, 0 1px 4px rgba(0, 0, 0, 0.35);
-  transition-property: transform;
-}
-.atomix-glass__border-1 {
-  z-index: 5;
-  opacity: 0.3;
+  -webkit-mask: linear-gradient(var(--atomix-black, #000000) 0 0) content-box, linear-gradient(var(--atomix-black, #000000) 0 0);
+          mask: linear-gradient(var(--atomix-black, #000000) 0 0) content-box, linear-gradient(var(--atomix-black, #000000) 0 0);
+  -webkit-mask-composite: xor;
+          mask-composite: exclude;
+  position: var(--atomix-glass-position);
+  top: var(--atomix-glass-top);
+  left: var(--atomix-glass-left);
+  width: var(--atomix-glass-width);
+  height: var(--atomix-glass-height);
+  border-radius: var(--atomix-glass-radius);
+  transform: var(--atomix-glass-transform);
+  transition: var(--atomix-glass-transition);
+}
+.c-atomix-glass__border-1 {
+  opacity: var(--atomix-opacity-20, 0.2);
   mix-blend-mode: screen;
+  z-index: var(--atomix-z-index-5, 5);
+  background: var(--atomix-glass-border-gradient-1, none);
+  box-shadow: var(--atomix-glass-border-shadow, 0 0 0 0.03125rem rgba(255, 255, 255, 0.5) inset, 0 0.25rem 0.75rem rgba(255, 255, 255, 0.25) inset, 0 0.25rem 1rem rgba(0, 0, 0, 0.35));
+}
+.c-atomix-glass__border-2 {
+  mix-blend-mode: overlay;
+  z-index: var(--atomix-z-index-6, 6);
+  background: var(--atomix-glass-border-gradient-2, none);
+  box-shadow: var(--atomix-glass-border-shadow, 0 0 0 0.03125rem rgba(255, 255, 255, 0.5) inset, 0 0.25rem 0.75rem rgba(255, 255, 255, 0.25) inset, 0 0.25rem 1rem rgba(0, 0, 0, 0.35));
+}
+.c-atomix-glass__container {
+  width: var(--atomix-glass-container-width);
+  height: var(--atomix-glass-container-height);
+  position: relative;
+  border-radius: var(--atomix-glass-radius);
+  transition: var(--atomix-glass-transition);
 }
-.atomix-glass__border-2 {
-  z-index: 6;
+.c-atomix-glass__inner {
+  width: var(--atomix-glass-container-width);
+  height: var(--atomix-glass-container-height);
+  position: relative;
+  border-radius: var(--atomix-glass-radius);
 }
-.atomix-glass__hover-1, .atomix-glass__hover-2, .atomix-glass__hover-3 {
+.c-atomix-glass__filter {
   position: absolute;
-  inset: 0;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
   pointer-events: none;
-  border-radius: inherit;
-  transform: inherit;
-  transition: inherit;
-  transition-property: transform, opacity;
 }
-.atomix-glass__hover-1 {
-  opacity: 0;
+.c-atomix-glass__filter-overlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
 }
-.atomix-glass__hover-2 {
-  overflow: hidden;
-  opacity: 0;
+.c-atomix-glass__filter-shadow {
+  position: absolute;
+  inset: var(--atomix-glass-border-width);
+  pointer-events: none;
 }
-.atomix-glass__hover-3 {
-  opacity: 0;
+.c-atomix-glass__content {
+  position: relative;
+  width: var(--atomix-glass-container-width);
+  height: var(--atomix-glass-container-height);
 }
-.atomix-glass__base {
+.c-atomix-glass__background-layer {
+  position: absolute;
+  pointer-events: none;
+  border-radius: var(--atomix-glass-radius);
+  transform: var(--atomix-glass-transform);
+  transition: var(--atomix-glass-transition);
   will-change: transform;
-  transition-property: transform, opacity;
-  opacity: 0;
 }
-.atomix-glass__overlay {
+.c-atomix-glass__background-layer--dark {
+  background-color: var(--atomix-gray-9, #1f2937);
+}
+.c-atomix-glass__background-layer--black {
+  background-color: var(--atomix-black, #000000);
   mix-blend-mode: overlay;
-  will-change: transform;
-  transition-property: transform, opacity;
-  opacity: 0;
+}
+.c-atomix-glass__background-layer--dark.c-atomix-glass__background-layer--over-light {
+  opacity: var(--atomix-opacity-50, 0.5);
+  z-index: -1;
+}
+.c-atomix-glass__background-layer--black.c-atomix-glass__background-layer--over-light {
+  opacity: var(--atomix-opacity-25, 0.25);
+}
+.c-atomix-glass__background-layer--hidden {
+  opacity: var(--atomix-opacity-0, 0);
+}
+.c-atomix-glass--reduced-motion {
+  --atomix-glass-transition: none;
+}
+.c-atomix-glass--reduced-motion * {
+  transition: none !important;
+}
+.c-atomix-glass--high-contrast {
+  border: var(--atomix-spacing-0-5, 2px) solid currentColor;
+  outline: var(--atomix-spacing-0-5, 2px) solid transparent;
+  outline-offset: var(--atomix-spacing-0-5, 2px);
+}
+.c-atomix-glass--disabled-effects {
+  --atomix-glass-transform: none;
+  --atomix-glass-transition: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .c-atomix-glass {
+    --atomix-glass-transition: none;
+  }
+  .c-atomix-glass * {
+    transition: none !important;
+  }
+}
+@media (prefers-contrast: high) {
+  .c-atomix-glass {
+    border-width: var(--atomix-spacing-0-5, 0.125rem);
+  }
 }
 .c-badge {
   --atomix-tag-font-size: 0.75rem;
@@ -2797,19 +2921,8 @@ a, a:hover {
   padding-top: 0;
 }
 .c-card--glass {
-  background-color: transparent;
-  padding: 0;
-  border: none;
-  display: block;
-  border-radius: 0;
-}
-.c-card--glass .c-card__glass-content {
-  padding: var(--atomix-card-spacer-y) var(--atomix-card-spacer-x);
-  max-width: var(--atomix-card-width);
-  border-radius: var(--atomix-card-border-radius);
-  width: 100%;
+  max-width: none;
   background-color: color-mix(in srgb, var(--atomix-card-bg) 50%, transparent);
-  background-blend-mode: overlay;
 }
 .is-elevated .c-card {
   box-shadow: var(--atomix-box-shadow-lg, 0 16px 48px rgba(0, 0, 0, 0.175));
@@ -2831,126 +2944,49 @@ a, a:hover {
   border: var(--atomix-chart-border-width) solid var(--atomix-chart-border-color);
   border-radius: var(--atomix-chart-border-radius);
   overflow: hidden;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.075);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(var(--atomix-primary-rgb), 0.05);
   position: relative;
   min-height: var(--atomix-chart-min-height);
   width: 100%;
   max-width: 100%;
-  background-color: var(--atomix-chart-bg);
-  transition-property: all;
-  transition-duration: 0.2s;
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
+  background: var(--atomix-chart-bg);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
 }
-.c-chart::after {
+.c-chart::before {
   content: "";
   position: absolute;
   inset: 0;
-  background: linear-gradient(135deg, rgba(var(--atomix-primary-rgb), 0.1) 0%, transparent 50%, rgba(var(--atomix-secondary-rgb), 0.05) 100%);
+  background: linear-gradient(135deg, rgba(var(--atomix-primary-rgb), 0.08) 0%, transparent 40%, transparent 60%, rgba(var(--atomix-secondary-rgb), 0.04) 100%), radial-gradient(circle at 20% 20%, rgba(var(--atomix-primary-rgb), 0.06) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(var(--atomix-secondary-rgb), 0.04) 0%, transparent 50%);
   pointer-events: none;
   z-index: 1;
+  opacity: 1;
+  transition: opacity 0.3s ease;
 }
-.c-chart:hover {
-  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.175);
-  border-color: var(--atomix-primary-border-subtle);
-}
-.c-chart:focus-visible {
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 0 0 calc(var(--atomix-border-width) * 3) var(--atomix-primary-border-subtle);
-}
-.c-chart--xs {
-  --atomix-chart-min-height: 7rem;
-  --atomix-chart-padding: 0.5rem;
-  font-size: 0.75rem;
-}
-.c-chart--sm {
-  --atomix-chart-min-height: 9rem;
-  --atomix-chart-padding: 0.75rem;
-  font-size: 0.875rem;
-}
-.c-chart--md {
-  --atomix-chart-min-height: 13rem;
-  --atomix-chart-padding: 1rem;
-  font-size: 1rem;
-}
-.c-chart--lg {
-  --atomix-chart-min-height: 18rem;
-  --atomix-chart-padding: 1.5rem;
-  font-size: 1.125rem;
-}
-.c-chart--xl {
-  --atomix-chart-min-height: 20rem;
-  --atomix-chart-padding: 2rem;
-  font-size: 1.25rem;
-}
-.c-chart--2xl {
-  --atomix-chart-min-height: ;
-  --atomix-chart-padding: 2.5rem;
-  font-size: 1.25rem;
-}
-.c-chart--full {
-  height: 100vh;
-  min-height: auto;
-  border-radius: 0;
-}
-.c-chart--auto {
-  height: auto;
-  min-height: 8rem;
-}
-.c-chart--primary {
-  --atomix-chart-primary-color: var(--atomix-primary-6);
-  --atomix-chart-border-color: var(--atomix-primary-border-subtle);
-}
-.c-chart--primary:hover {
-  border-color: var(--atomix-primary-border-subtle);
-}
-.c-chart--secondary {
-  --atomix-chart-primary-color: var(--atomix-secondary-6);
-  --atomix-chart-border-color: var(--atomix-secondary-border-subtle);
-}
-.c-chart--secondary:hover {
-  border-color: var(--atomix-secondary-border-subtle);
-}
-.c-chart--success {
-  --atomix-chart-primary-color: var(--atomix-success-6);
-  --atomix-chart-border-color: var(--atomix-success-border-subtle);
-}
-.c-chart--success:hover {
-  border-color: var(--atomix-success-border-subtle);
-}
-.c-chart--info {
-  --atomix-chart-primary-color: var(--atomix-info-6);
-  --atomix-chart-border-color: var(--atomix-info-border-subtle);
-}
-.c-chart--info:hover {
-  border-color: var(--atomix-info-border-subtle);
-}
-.c-chart--warning {
-  --atomix-chart-primary-color: var(--atomix-warning-6);
-  --atomix-chart-border-color: var(--atomix-warning-border-subtle);
-}
-.c-chart--warning:hover {
-  border-color: var(--atomix-warning-border-subtle);
-}
-.c-chart--error {
-  --atomix-chart-primary-color: var(--atomix-error-6);
-  --atomix-chart-border-color: var(--atomix-error-border-subtle);
-}
-.c-chart--error:hover {
-  border-color: var(--atomix-error-border-subtle);
-}
-.c-chart--light {
-  --atomix-chart-primary-color: var(--atomix-light-6);
-  --atomix-chart-border-color: var(--atomix-light-border-subtle);
-}
-.c-chart--light:hover {
-  border-color: var(--atomix-light-border-subtle);
+.c-chart::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1px;
+  background: linear-gradient(135deg, rgba(var(--atomix-primary-rgb), 0.1), rgba(var(--atomix-secondary-rgb), 0.05), transparent);
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+          mask-composite: exclude;
+  pointer-events: none;
+  z-index: 2;
+  opacity: 0;
+  transition: opacity 0.3s ease;
 }
-.c-chart--dark {
-  --atomix-chart-primary-color: var(--atomix-dark-6);
-  --atomix-chart-border-color: var(--atomix-dark-border-subtle);
+.c-chart:hover {
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(var(--atomix-primary-rgb), 0.1), 0 0 40px rgba(var(--atomix-primary-rgb), 0.08);
+  border-color: rgba(var(--atomix-primary-rgb), 0.2);
 }
-.c-chart--dark:hover {
-  border-color: var(--atomix-dark-border-subtle);
+.c-chart:hover::after {
+  opacity: 1;
 }
 .c-chart--loading .c-chart__content {
   position: relative;
@@ -2970,38 +3006,6 @@ a, a:hover {
   opacity: 0.3;
   filter: blur(1px);
 }
-.c-chart--interactive {
-  cursor: pointer;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-}
-.c-chart--interactive:hover {
-  transform: translateY(-2px);
-  box-shadow: 0px 16px 64px -8px rgba(45, 54, 67, 0.14);
-}
-.c-chart--interactive:active {
-  transform: translateY(0);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  transition-duration: 0.1s;
-}
-.c-chart--interactive:focus-visible {
-  transform: translateY(-1px);
-}
-.c-chart--disabled {
-  pointer-events: none;
-  opacity: 0.6;
-}
-.c-chart--disabled .c-chart__content {
-  filter: grayscale(80%) opacity(0.6);
-}
-.c-chart--disabled .c-chart__canvas {
-  pointer-events: none;
-}
-.c-chart--disabled:hover {
-  transform: none;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.075);
-}
 .c-chart--fullscreen {
   position: fixed;
   top: 0;
@@ -3011,29 +3015,58 @@ a, a:hover {
   z-index: 9999;
   border-radius: 0;
   box-shadow: none;
-  background: var(--atomix-primary-bg-default);
+  background: var(--atomix-body-bg);
 }
 .c-chart--elevated {
-  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.175);
-  transform: translateY(-2px);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15), 0 6px 12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(var(--atomix-primary-rgb), 0.1), 0 0 60px rgba(var(--atomix-primary-rgb), 0.12);
 }
 .c-chart--elevated:hover {
-  box-shadow: 0px 16px 64px -8px rgba(45, 54, 67, 0.14);
-  transform: translateY(-4px);
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(var(--atomix-primary-rgb), 0.15), 0 0 80px rgba(var(--atomix-primary-rgb), 0.16);
 }
-.c-chart--flat {
+.c-chart--glass {
+  background: transparent;
+  border: none;
   box-shadow: none;
-  border: 2px solid var(--atomix-primary-border-subtle);
 }
-.c-chart--flat:hover {
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.075);
+.c-chart--glass .c-chart__content {
+  position: relative;
+}
+.c-chart--glass .c-chart__canvas {
+  position: relative;
+}
+.c-chart--glass .c-chart__toolbar {
+  position: relative;
+}
+.c-chart--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+  pointer-events: none;
+  opacity: 0.6;
+}
+.c-chart--disabled:hover, .c-chart--disabled:focus, .c-chart--disabled:active {
+  background-color: inherit;
+  color: inherit;
   transform: none;
 }
-.c-chart--rounded {
-  border-radius: 0.75rem;
+.c-chart--selected {
+  border-color: rgba(var(--atomix-primary-rgb), 0.3);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 0 2px rgba(var(--atomix-primary-rgb), 0.2), 0 0 30px rgba(var(--atomix-primary-rgb), 0.15);
+  background: linear-gradient(135deg, rgba(var(--atomix-primary-rgb), 0.08) 0%, rgba(var(--atomix-primary-rgb), 0.04) 100%), var(--atomix-chart-bg);
 }
-.c-chart--square {
-  border-radius: 0;
+.c-chart--active {
+  border-color: var(--atomix-primary-border-subtle);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+.c-chart--clickable {
+  cursor: pointer;
+}
+.c-chart--clickable:hover {
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(var(--atomix-primary-rgb), 0.1), 0 0 40px rgba(var(--atomix-primary-rgb), 0.08);
+  border-color: rgba(var(--atomix-primary-rgb), 0.25);
+}
+.c-chart--clickable:active {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.12);
 }
 .c-chart__header {
   padding: var(--atomix-chart-padding);
@@ -3143,8 +3176,11 @@ a, a:hover {
   transform: scale(1.1);
 }
 .c-chart__action:focus-visible {
-  outline: 2px solid var(--atomix-primary-6);
+  outline: 2px solid var(--atomix-focus-border-color);
   outline-offset: 2px;
+  box-shadow: 0 0 0 2px var(--atomix-focus-border-color);
+}
+.c-chart__action:focus-visible {
   border-color: var(--atomix-primary-border-subtle);
 }
 .c-chart__action:active {
@@ -3170,45 +3206,6 @@ a, a:hover {
   background-color: transparent;
   border-color: transparent;
 }
-.c-chart__action--primary {
-  background-color: var(--atomix-primary-6);
-  color: white;
-  border-color: var(--atomix-primary-6);
-}
-.c-chart__action--primary:hover {
-  background-color: var(--atomix-primary-7);
-  border-color: var(--atomix-primary-7);
-}
-.c-chart__action--primary:active {
-  background-color: var(--atomix-primary-8);
-}
-.c-chart__action--success {
-  background-color: var(--atomix-success-6);
-  color: white;
-  border-color: var(--atomix-success-6);
-}
-.c-chart__action--success:hover {
-  background-color: var(--atomix-success-7);
-  border-color: var(--atomix-success-7);
-}
-.c-chart__action--warning {
-  background-color: var(--atomix-warning-6);
-  color: white;
-  border-color: var(--atomix-warning-6);
-}
-.c-chart__action--warning:hover {
-  background-color: var(--atomix-warning-7);
-  border-color: var(--atomix-warning-7);
-}
-.c-chart__action--danger {
-  background-color: var(--atomix-error-6);
-  color: white;
-  border-color: var(--atomix-error-6);
-}
-.c-chart__action--danger:hover {
-  background-color: var(--atomix-error-7);
-  border-color: var(--atomix-error-7);
-}
 .c-chart__export-group {
   position: relative;
   display: flex;
@@ -3230,7 +3227,7 @@ a, a:hover {
   border-radius: 0.25rem;
   box-shadow: 0 16px 48px rgba(0, 0, 0, 0.175);
   padding: 0.25rem;
-  min-width: 7.5rem;
+  min-width: 7rem;
   z-index: 1000;
   opacity: 0;
   visibility: hidden;
@@ -3260,8 +3257,8 @@ a, a:hover {
   color: var(--atomix-primary-text-emphasis);
 }
 .c-chart__export-option:focus-visible {
-  outline: 2px solid var(--atomix-primary-6);
-  outline-offset: -2px;
+  outline: calc(var(--atomix-border-width) * 2) solid var(--atomix-primary-6);
+  outline-offset: calc(var(--atomix-border-width) * -2);
 }
 .c-chart__export-option:disabled {
   opacity: 0.4;
@@ -3271,201 +3268,178 @@ a, a:hover {
 .c-chart__export-option:not(:last-child) {
   margin-bottom: 0.25rem;
 }
-.c-chart__content {
-  flex: 1 1;
-  position: relative;
-  padding: var(--atomix-chart-padding);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 8rem;
-}
-.c-chart__content::before {
-  content: "";
+.c-chart__settings-menu {
   position: absolute;
-  top: 0;
-  left: 0;
+  top: 100%;
   right: 0;
-  bottom: 0;
-  background-image: radial-gradient(circle at 1px 1px, var(--atomix-primary-border-subtle) 1px, transparent 0);
-  background-size: 1.25rem 1.25rem;
-  opacity: 0.03;
-  pointer-events: none;
-  z-index: 0;
-}
-.c-chart__content::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 50%, rgba(0, 0, 0, 0.02) 100%);
-  pointer-events: none;
-  z-index: 1;
-}
-.c-chart__canvas {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  overflow: hidden;
+  margin-top: 0.25rem;
+  background: var(--atomix-primary-bg-default);
+  border: 1px solid var(--atomix-primary-border-subtle);
   border-radius: 0.25rem;
-  z-index: 2;
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.175);
+  padding: 0.5rem;
+  min-width: 8.75rem;
+  z-index: 1000;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-8px);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  -webkit-backdrop-filter: blur(8px);
+          backdrop-filter: blur(8px);
 }
-.c-chart__canvas svg {
-  width: 100%;
-  height: 100%;
-  shape-rendering: geometricPrecision;
-  text-rendering: optimizeLegibility;
-  image-rendering: -webkit-optimize-contrast;
-  image-rendering: crisp-edges;
+.c-chart__settings-menu-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--atomix-text-primary);
+  margin-bottom: 0.5rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--atomix-border-color);
 }
-.c-chart__canvas canvas {
-  width: 100%;
-  height: 100%;
-  image-rendering: -webkit-optimize-contrast;
-  image-rendering: crisp-edges;
+.c-chart__settings-menu-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
 }
-.c-chart__crosshair {
-  pointer-events: none;
+.c-chart__settings-menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.375rem 0;
+  gap: 0.75rem;
 }
-.c-chart__crosshair line, .c-chart__crosshair-line {
-  stroke: var(--atomix-primary-border-subtle);
-  stroke-width: 1;
-  stroke-dasharray: 4, 4;
+.c-chart__settings-menu-item--info {
   opacity: 0.7;
+  font-size: 0.75rem;
 }
-.c-chart__crosshair line--vertical, .c-chart__crosshair line--horizontal, .c-chart__crosshair-line--vertical, .c-chart__crosshair-line--horizontal {
-  opacity: 0.7;
+.c-chart__settings-menu-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  width: 100%;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
-.c-chart__zoom-indicator {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  background: rgba(0, 0, 0, 0.8);
-  color: white;
-  padding: 4px 8px;
-  border-radius: 0.25rem;
+.c-chart__settings-menu-toggle input[type=checkbox] {
+  width: 1rem;
+  height: 1rem;
+  cursor: pointer;
+  accent-color: var(--atomix-primary);
+  flex-shrink: 0;
+}
+.c-chart__settings-menu-label {
   font-size: 0.75rem;
   font-weight: 500;
-  pointer-events: none;
-  z-index: 10;
-}
-.c-chart__navigator {
-  opacity: 0.8;
-}
-.c-chart__navigator rect {
-  fill: rgba(0, 0, 0, 0.05);
-  stroke: var(--atomix-gray-3);
-  stroke-width: 1;
+  color: var(--atomix-text-primary);
+  flex: 1 1;
 }
-.c-chart__navigator path {
-  stroke-width: 1;
-  fill: none;
-  opacity: 0.6;
+.c-chart__settings-menu-value {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--atomix-secondary-text-emphasis);
+  text-transform: capitalize;
 }
-.c-chart__real-time-indicator {
-  position: absolute;
-  top: 10px;
-  left: 10px;
+.c-chart__toolbar-group {
   display: flex;
   align-items: center;
-  gap: 6px;
-  background: var(--atomix-success-bg-subtle);
-  color: var(--atomix-success-text-emphasis);
-  padding: 4px 8px;
-  border-radius: 0.25rem;
+  gap: 0.5rem;
+  position: relative;
+}
+.c-chart__toolbar-group:hover .c-chart__export-dropdown,
+.c-chart__toolbar-group:hover .c-chart__settings-menu {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+.c-chart__toolbar-separator {
+  width: 1px;
+  height: 1.5rem;
+  background: var(--atomix-border-color);
+  margin: 0 0.5rem;
+}
+.c-chart__toolbar-label {
   font-size: 0.75rem;
   font-weight: 500;
-  border: 1px solid var(--atomix-success-border-subtle);
-}
-.c-chart__real-time-indicator::before {
-  content: "";
-  width: 6px;
-  height: 6px;
-  background: var(--atomix-success-6);
-  border-radius: 50%;
-  animation: chart-pulse-dot 2s ease-in-out infinite;
+  color: var(--atomix-secondary-text-emphasis);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-right: 0.5rem;
 }
-.c-chart__legend {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
+.c-chart__content {
+  flex: 1 1;
+  position: relative;
   padding: var(--atomix-chart-padding);
-  border-top: var(--atomix-chart-border-width) solid var(--atomix-brand-border-subtle);
-  z-index: 2;
-}
-.c-chart__legend-item {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-  padding: 0.5rem 0.75rem;
-  border-radius: 0.25rem;
-  border: var(--atomix-chart-border-width) solid transparent;
-  background-color: transparent;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  position: relative;
+  justify-content: center;
+  min-height: 8rem;
+  z-index: 3;
+  contain: layout;
   overflow: hidden;
 }
-.c-chart__legend-item::before {
+.c-chart__content::before {
   content: "";
   position: absolute;
-  inset: 0;
-  background: var(--atomix-secondary-bg-subtle);
-  opacity: 0;
-  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.c-chart__legend-item:hover {
-  background-color: var(--atomix-secondary-bg-subtle);
-  border-color: var(--atomix-primary-border-subtle);
-  transform: translateY(-1px);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.075);
-}
-.c-chart__legend-item:hover::before {
-  opacity: 1;
-}
-.c-chart__legend-item:focus-visible:focus-visible {
-  outline: 2px solid var(--atomix-focus-border-color);
-  outline-offset: 2px;
-  box-shadow: 0 0 0 2px var(--atomix-focus-border-color);
-}
-.c-chart__legend-item:active {
-  transform: translateY(0);
-}
-.c-chart__legend-item[data-visible=false] {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: radial-gradient(circle at 1px 1px, rgba(var(--atomix-primary-rgb), 0.08) 1px, transparent 0);
+  background-size: 16px 16px;
   opacity: 0.4;
-  filter: grayscale(60%);
-}
-.c-chart__legend-item[data-visible=false] .c-chart__legend-label {
-  text-decoration: line-through;
+  pointer-events: none;
+  z-index: 0;
 }
-.c-chart__legend-item[data-visible=false] .c-chart__legend-color {
-  opacity: 0.3;
-  filter: grayscale(100%);
+.c-chart__content::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, rgba(var(--atomix-primary-rgb), 0.03) 0%, transparent 30%, transparent 70%, rgba(var(--atomix-secondary-rgb), 0.02) 100%);
+  pointer-events: none;
+  z-index: 1;
 }
-.c-chart__legend-color {
-  width: 0.75rem;
-  height: 0.75rem;
-  border-radius: 0.25rem;
-  border: var(--atomix-chart-border-width) solid var(--atomix-primary-border-subtle);
-  flex-shrink: 0;
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+.c-chart__canvas {
+  width: 100%;
+  height: 100%;
   position: relative;
+  overflow: hidden;
+  border-radius: 0.25rem;
+  z-index: 2;
+  background: transparent;
+  min-height: 200px;
+  contain: layout style paint;
 }
-.c-chart__legend-label {
-  color: var(--atomix-primary-text-emphasis);
-  font-weight: 500;
-  letter-spacing: -0.01em;
-  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  position: relative;
-  z-index: 1;
+.c-chart__canvas svg {
+  display: block;
+  shape-rendering: geometricPrecision;
+  text-rendering: optimizeLegibility;
+  image-rendering: -webkit-optimize-contrast;
+  image-rendering: crisp-edges;
+  will-change: contents;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+  transform: translateZ(0);
+  opacity: 0;
+  animation: chart-fade-in 0.3s ease-out forwards;
+}
+@keyframes chart-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.c-chart__canvas canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+  image-rendering: -webkit-optimize-contrast;
+  image-rendering: crisp-edges;
 }
 .c-chart__tooltip {
   position: fixed;
-  top: 0;
-  left: 0;
   -webkit-backdrop-filter: blur(1rem);
           backdrop-filter: blur(1rem);
   border-radius: 0.625rem;
@@ -3497,8 +3471,8 @@ a, a:hover {
   gap: 0.5rem;
 }
 .c-chart__tooltip-color-indicator {
-  width: 12px;
-  height: 12px;
+  width: 0.75rem;
+  height: 0.75rem;
   border-radius: 50%;
   flex-shrink: 0;
 }
@@ -3532,64 +3506,10 @@ a, a:hover {
   color: var(--atomix-primary-text-emphasis);
   font-weight: 500;
 }
-.c-chart__axis {
-  position: relative;
-  z-index: 55;
-}
-.c-chart__axis--x {
-  text-anchor: middle;
-  dominant-baseline: hanging;
-}
-.c-chart__axis--y {
-  text-anchor: end;
-  dominant-baseline: middle;
-}
-.c-chart__axis-line {
-  stroke: var(--atomix-primary-border-subtle);
-  stroke-width: 1;
-  opacity: 0.6;
-  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.c-chart__axis-line--x, .c-chart__axis-line--y {
-  stroke-width: 2;
-}
-.c-chart__axis-line:hover {
-  opacity: 0.8;
-}
-.c-chart__tick-line {
-  stroke: var(--atomix-primary-border-subtle);
-  stroke-width: 1;
-}
-.c-chart__tick-label {
-  font-size: 0.75rem;
-  fill: var(--atomix-secondary-text-emphasis);
-}
-.c-chart__axis-label {
-  font-size: 0.75rem;
-  font-weight: 500;
-  fill: var(--atomix-tertiary-text-emphasis);
-  text-anchor: middle;
-}
-.c-chart__plot-area {
-  fill: rgba(248, 250, 252, 0.5);
-  stroke: var(--atomix-primary-border-subtle);
-  stroke-width: 1;
-}
-.c-chart__value-label {
-  font-size: 0.75rem;
-  fill: var(--atomix-primary-text-emphasis);
-  pointer-events: none;
-}
-.c-chart__data-label {
-  font-size: 0.75rem;
-  fill: var(--atomix-secondary-text-emphasis);
-  pointer-events: none;
-}
 .c-chart__grid {
   stroke: var(--atomix-primary-border-subtle);
   stroke-width: 0.5;
   stroke-dasharray: 2, 4;
-  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .c-chart__grid--major {
   stroke-width: 1;
@@ -3604,40 +3524,54 @@ a, a:hover {
   stroke-dasharray: none;
   opacity: 0.6;
 }
-.c-chart__grid:hover {
+.c-chart__axis-line {
+  stroke: var(--atomix-border-color);
+  stroke-width: 1;
   opacity: 0.6;
 }
+.c-chart__axis-label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  fill: var(--atomix-tertiary-text-emphasis);
+}
+.c-chart__legend-item-color {
+  width: 0.75rem;
+  height: 0.75rem;
+  flex-shrink: 0;
+}
+.c-chart__legend-item-text {
+  font-size: 0.75rem;
+  fill: var(--atomix-text-primary);
+}
+.c-chart__data-line {
+  stroke-width: 2.5;
+  fill: none;
+}
+.c-chart__data-line--hovered {
+  stroke-width: 3.5;
+}
 .c-chart__data-point {
   cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
-  transform-origin: center center;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .c-chart__data-point:hover {
   opacity: 0.8;
-  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
 }
 .c-chart__data-point:focus-visible {
-  outline: 2px solid var(--atomix-primary-border-subtle);
+  outline: 2px solid var(--atomix-focus-border-color);
   outline-offset: 2px;
+  box-shadow: 0 0 0 2px var(--atomix-focus-border-color);
 }
-.c-chart__data-point:active {
-  transform: scale(1.05);
-}
-.c-chart__data-point[data-highlighted=true] {
-  transform: scale(1.2);
-  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
-  z-index: 10;
-  animation: chart-glow 2s ease-in-out infinite;
+.c-chart__data-point--hovered {
+  opacity: 0.9;
+  transform: scale(1.1);
 }
-.c-chart__data-point[data-selected=true] {
-  stroke: var(--atomix-primary-border-subtle);
+.c-chart__data-point--selected {
+  opacity: 1;
   stroke-width: 2;
-  filter: drop-shadow(0 0 0 2px var(--atomix-primary-border-subtle));
+  filter: drop-shadow(0 0 4px currentColor);
 }
-.c-chart__data-point[data-animated=true] {
-  animation: chart-scale-in 0.5s ease-out;
-}
-.c-chart__loading {
+.c-chart__empty {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -3645,970 +3579,707 @@ a, a:hover {
   gap: 1rem;
   color: var(--atomix-secondary-text-emphasis);
   font-size: 0.875rem;
+  text-align: center;
+  padding: 2rem;
   min-height: 8rem;
+  opacity: 0.6;
   animation: chart-fade-in 0.6s ease-out;
 }
-.c-chart__loading-spinner {
-  width: 2rem;
-  height: 2rem;
-  border: 3px solid var(--atomix-primary-border-subtle);
-  border-top: 3px solid var(--atomix-primary-text-emphasis);
-  border-radius: 50%;
-  animation: chart-spin 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
-}
-.c-chart__loading-text {
-  font-weight: 500;
-  opacity: 0.8;
-  animation: chart-pulse 2s ease-in-out infinite;
+.c-chart__toolbar--sm {
+  gap: 0.25rem;
 }
-.c-chart__error {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+.c-chart__toolbar--lg {
+  padding: 0.5rem;
   gap: 0.75rem;
-  color: var(--atomix-error-text-emphasis);
-  font-size: 0.875rem;
-  text-align: center;
-  padding: 2rem;
-  min-height: 8rem;
-  background-color: var(--atomix-error-bg-subtle);
-  border-radius: 0.25rem;
-  border: var(--atomix-chart-border-width) solid var(--atomix-error-border-subtle);
-  animation: chart-fade-in 0.6s ease-out;
-}
-.c-chart__empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 1rem;
-  color: var(--atomix-secondary-text-emphasis);
-  font-size: 0.875rem;
-  text-align: center;
-  padding: 2rem;
-  min-height: 8rem;
-  opacity: 0.6;
-  animation: chart-fade-in 0.6s ease-out;
-}
-.c-chart--line .c-chart__canvas .line-path,
-.c-chart--line .c-chart__canvas .c-chart__line-path {
-  fill: none;
-  stroke-width: 2.5;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
-  stroke-dasharray: 1000;
-  stroke-dashoffset: 1000;
-  animation: chart-draw-line 2s ease-out forwards;
-}
-.c-chart--line .c-chart__canvas .line-path:hover,
-.c-chart--line .c-chart__canvas .c-chart__line-path:hover {
-  stroke-width: 3.5;
-  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
 }
-.c-chart--line .c-chart__canvas .trend-line {
-  stroke-dasharray: 5, 5;
-  opacity: 0.7;
-  animation: chart-dash-flow 2s linear infinite;
-}
-.c-chart--line .c-chart__canvas .moving-average {
-  stroke-dasharray: 4, 4;
-  opacity: 0.6;
-  stroke-width: 1;
-  fill: none;
-}
-.c-chart--line .c-chart__canvas .area-path,
-.c-chart--line .c-chart__canvas .c-chart__area-path {
-  opacity: 0.15;
-  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  animation: chart-area-fade 1.5s ease-out;
-}
-.c-chart--line .c-chart__canvas .area-path:hover,
-.c-chart--line .c-chart__canvas .c-chart__area-path:hover {
-  opacity: 0.25;
-}
-.c-chart--line .c-chart__canvas .chart-point-label {
-  font-size: 0.75rem;
+.c-chart__legend-item--active {
+  opacity: 1;
   font-weight: 600;
-  text-anchor: middle;
-  dominant-baseline: middle;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 0.2s ease;
 }
-.c-chart--line .c-chart__canvas .chart-point-label.visible {
-  opacity: 1;
+.c-chart__legend-item--inactive {
+  opacity: 0.5;
 }
-.c-chart--line .c-chart__canvas .data-point {
-  r: 4;
+.c-chart__treemap-node {
+  stroke: var(--atomix-border-color);
+  stroke-width: 1;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   cursor: pointer;
+  shape-rendering: geometricPrecision;
 }
-.c-chart--line .c-chart__canvas .data-point:hover {
-  r: 6;
-  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
+.c-chart__treemap-node:hover {
+  transform: scale(1.02);
+  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
+  stroke-width: 1.5;
 }
-.c-chart--line .c-chart__canvas .data-point[data-highlighted=true] {
-  r: 8;
-  stroke-width: 3;
+.c-chart__treemap-node--hovered {
+  transform: scale(1.02);
+  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
+  stroke-width: 1.5;
+}
+.c-chart__treemap-node--selected {
+  stroke: var(--atomix-primary-border-subtle);
+  stroke-width: 2;
+  filter: drop-shadow(0 16px 48px rgba(0, 0, 0, 0.175));
 }
-.c-chart--line .c-chart__canvas .data-point:focus-visible {
+.c-chart__treemap-node:focus-visible {
   outline: 2px solid var(--atomix-focus-border-color);
   outline-offset: 2px;
+  box-shadow: 0 0 0 2px var(--atomix-focus-border-color);
 }
-.c-chart--area .c-chart__canvas .area-path {
-  opacity: 0.3;
-  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  animation: chart-area-fade 1.5s ease-out;
-}
-.c-chart--area .c-chart__canvas .area-path:hover {
-  opacity: 0.45;
-}
-.c-chart--area .c-chart__canvas .line-path {
-  stroke-width: 2;
-  opacity: 0.9;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  animation: chart-draw-line 2s ease-out;
-}
-.c-chart--area .c-chart__canvas .line-path:hover {
-  stroke-width: 3;
-  opacity: 1;
+.c-chart__treemap-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  fill: var(--atomix-text-primary);
+  text-anchor: middle;
+  dominant-baseline: middle;
+  pointer-events: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 }
-.c-chart--bar .c-chart__canvas .bar,
-.c-chart--bar .c-chart__canvas .c-chart__bar, .c-chart--horizontal-bar .c-chart__canvas .bar,
-.c-chart--horizontal-bar .c-chart__canvas .c-chart__bar {
+.c-chart__funnel-segment {
+  stroke: var(--atomix-border-color);
+  stroke-width: 1;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   cursor: pointer;
-  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
-  animation: chart-bar-grow 0.8s ease-out;
-  opacity: 1;
+  shape-rendering: geometricPrecision;
 }
-.c-chart--bar .c-chart__canvas .bar:hover, .c-chart--bar .c-chart__canvas .bar--hovered,
-.c-chart--bar .c-chart__canvas .c-chart__bar:hover,
-.c-chart--bar .c-chart__canvas .c-chart__bar--hovered, .c-chart--horizontal-bar .c-chart__canvas .bar:hover, .c-chart--horizontal-bar .c-chart__canvas .bar--hovered,
-.c-chart--horizontal-bar .c-chart__canvas .c-chart__bar:hover,
-.c-chart--horizontal-bar .c-chart__canvas .c-chart__bar--hovered {
-  opacity: 0.85;
-  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
+.c-chart__funnel-segment:hover {
+  opacity: 0.9;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.075));
+  stroke-width: 1.5;
 }
-.c-chart--bar .c-chart__canvas .bar:focus-visible,
-.c-chart--bar .c-chart__canvas .c-chart__bar:focus-visible, .c-chart--horizontal-bar .c-chart__canvas .bar:focus-visible,
-.c-chart--horizontal-bar .c-chart__canvas .c-chart__bar:focus-visible {
-  outline: 2px solid var(--atomix-primary-border-subtle);
+.c-chart__funnel-segment:focus-visible {
+  outline: 2px solid var(--atomix-focus-border-color);
   outline-offset: 2px;
+  box-shadow: 0 0 0 2px var(--atomix-focus-border-color);
 }
-.c-chart--bar .c-chart__canvas .bar[data-animated=true],
-.c-chart--bar .c-chart__canvas .c-chart__bar[data-animated=true], .c-chart--horizontal-bar .c-chart__canvas .bar[data-animated=true],
-.c-chart--horizontal-bar .c-chart__canvas .c-chart__bar[data-animated=true] {
-  animation: chart-bar-grow 0.8s ease-out;
-}
-.c-chart--bar .c-chart__canvas .bar-group .bar, .c-chart--horizontal-bar .c-chart__canvas .bar-group .bar {
-  animation-delay: calc(var(--bar-index) * 0.1s);
-}
-.c-chart--bar .c-chart__canvas .bar-value-label,
-.c-chart--bar .c-chart__canvas .c-chart__bar-value-label, .c-chart--horizontal-bar .c-chart__canvas .bar-value-label,
-.c-chart--horizontal-bar .c-chart__canvas .c-chart__bar-value-label {
-  font-size: 0.75rem;
+.c-chart__funnel-label {
+  font-size: 0.875rem;
   font-weight: 500;
-  fill: var(--atomix-primary-text-emphasis);
+  fill: var(--atomix-text-primary);
   text-anchor: middle;
-  opacity: 1;
-  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  font-feature-settings: "tnum";
-  font-variant-numeric: tabular-nums;
+  dominant-baseline: middle;
   pointer-events: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 }
-.c-chart--bar .c-chart__canvas .bar-value-label.visible,
-.c-chart--bar .c-chart__canvas .c-chart__bar-value-label.visible, .c-chart--horizontal-bar .c-chart__canvas .bar-value-label.visible,
-.c-chart--horizontal-bar .c-chart__canvas .c-chart__bar-value-label.visible {
-  opacity: 1;
-}
-.c-chart--bar .c-chart__canvas .bar-gradient stop, .c-chart--horizontal-bar .c-chart__canvas .bar-gradient stop {
-  transition: stop-opacity 0.3s ease;
-}
-.c-chart--bar .c-chart__canvas .bar {
-  transform-origin: bottom center;
-  animation: chart-bar-grow 0.8s ease-out;
-}
-.c-chart--bar .c-chart__canvas .bar:hover {
-  transform: scaleY(1.05);
-}
-.c-chart--horizontal-bar .c-chart__canvas .bar {
-  transform-origin: left center;
-  animation: chart-bar-grow-horizontal 0.8s ease-out;
-}
-.c-chart--horizontal-bar .c-chart__canvas .bar:hover {
-  transform: scaleX(1.05);
-}
-.c-chart--pie .c-chart__canvas .pie-slice,
-.c-chart--pie .c-chart__canvas .donut-slice,
-.c-chart--pie .c-chart__canvas .c-chart__pie-slice,
-.c-chart--pie .c-chart__canvas .c-chart__donut-slice, .c-chart--donut .c-chart__canvas .pie-slice,
-.c-chart--donut .c-chart__canvas .donut-slice,
-.c-chart--donut .c-chart__canvas .c-chart__pie-slice,
-.c-chart--donut .c-chart__canvas .c-chart__donut-slice, .c-chart--doughnut .c-chart__canvas .pie-slice,
-.c-chart--doughnut .c-chart__canvas .donut-slice,
-.c-chart--doughnut .c-chart__canvas .c-chart__pie-slice,
-.c-chart--doughnut .c-chart__canvas .c-chart__donut-slice {
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  stroke: var(--atomix-primary-bg-subtle);
-  stroke-width: 2;
-  cursor: pointer;
-  transform-origin: center;
-  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
-  opacity: 1;
-  animation: chart-pie-draw 1.5s ease-out;
-}
-.c-chart--pie .c-chart__canvas .pie-slice:hover, .c-chart--pie .c-chart__canvas .pie-slice--hovered,
-.c-chart--pie .c-chart__canvas .donut-slice:hover,
-.c-chart--pie .c-chart__canvas .donut-slice--hovered,
-.c-chart--pie .c-chart__canvas .c-chart__pie-slice:hover,
-.c-chart--pie .c-chart__canvas .c-chart__pie-slice--hovered,
-.c-chart--pie .c-chart__canvas .c-chart__donut-slice:hover,
-.c-chart--pie .c-chart__canvas .c-chart__donut-slice--hovered, .c-chart--donut .c-chart__canvas .pie-slice:hover, .c-chart--donut .c-chart__canvas .pie-slice--hovered,
-.c-chart--donut .c-chart__canvas .donut-slice:hover,
-.c-chart--donut .c-chart__canvas .donut-slice--hovered,
-.c-chart--donut .c-chart__canvas .c-chart__pie-slice:hover,
-.c-chart--donut .c-chart__canvas .c-chart__pie-slice--hovered,
-.c-chart--donut .c-chart__canvas .c-chart__donut-slice:hover,
-.c-chart--donut .c-chart__canvas .c-chart__donut-slice--hovered, .c-chart--doughnut .c-chart__canvas .pie-slice:hover, .c-chart--doughnut .c-chart__canvas .pie-slice--hovered,
-.c-chart--doughnut .c-chart__canvas .donut-slice:hover,
-.c-chart--doughnut .c-chart__canvas .donut-slice--hovered,
-.c-chart--doughnut .c-chart__canvas .c-chart__pie-slice:hover,
-.c-chart--doughnut .c-chart__canvas .c-chart__pie-slice--hovered,
-.c-chart--doughnut .c-chart__canvas .c-chart__donut-slice:hover,
-.c-chart--doughnut .c-chart__canvas .c-chart__donut-slice--hovered {
-  opacity: 0.8;
-  transform: scale(1.05);
-  stroke-width: 3;
-  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
-}
-.c-chart--pie .c-chart__canvas .pie-slice--selected,
-.c-chart--pie .c-chart__canvas .donut-slice--selected,
-.c-chart--pie .c-chart__canvas .c-chart__pie-slice--selected,
-.c-chart--pie .c-chart__canvas .c-chart__donut-slice--selected, .c-chart--donut .c-chart__canvas .pie-slice--selected,
-.c-chart--donut .c-chart__canvas .donut-slice--selected,
-.c-chart--donut .c-chart__canvas .c-chart__pie-slice--selected,
-.c-chart--donut .c-chart__canvas .c-chart__donut-slice--selected, .c-chart--doughnut .c-chart__canvas .pie-slice--selected,
-.c-chart--doughnut .c-chart__canvas .donut-slice--selected,
-.c-chart--doughnut .c-chart__canvas .c-chart__pie-slice--selected,
-.c-chart--doughnut .c-chart__canvas .c-chart__donut-slice--selected {
-  stroke: var(--atomix-primary-border-subtle);
-  stroke-width: 3;
-}
-.c-chart--pie .c-chart__canvas .pie-slice:focus-visible,
-.c-chart--pie .c-chart__canvas .donut-slice:focus-visible,
-.c-chart--pie .c-chart__canvas .c-chart__pie-slice:focus-visible,
-.c-chart--pie .c-chart__canvas .c-chart__donut-slice:focus-visible, .c-chart--donut .c-chart__canvas .pie-slice:focus-visible,
-.c-chart--donut .c-chart__canvas .donut-slice:focus-visible,
-.c-chart--donut .c-chart__canvas .c-chart__pie-slice:focus-visible,
-.c-chart--donut .c-chart__canvas .c-chart__donut-slice:focus-visible, .c-chart--doughnut .c-chart__canvas .pie-slice:focus-visible,
-.c-chart--doughnut .c-chart__canvas .donut-slice:focus-visible,
-.c-chart--doughnut .c-chart__canvas .c-chart__pie-slice:focus-visible,
-.c-chart--doughnut .c-chart__canvas .c-chart__donut-slice:focus-visible {
-  outline: 2px solid var(--atomix-primary-border-subtle);
-  outline-offset: 4px;
-}
-.c-chart--pie .c-chart__canvas .pie-label,
-.c-chart--pie .c-chart__canvas .c-chart__pie-label,
-.c-chart--pie .c-chart__canvas .c-chart__donut-label, .c-chart--donut .c-chart__canvas .pie-label,
-.c-chart--donut .c-chart__canvas .c-chart__pie-label,
-.c-chart--donut .c-chart__canvas .c-chart__donut-label, .c-chart--doughnut .c-chart__canvas .pie-label,
-.c-chart--doughnut .c-chart__canvas .c-chart__pie-label,
-.c-chart--doughnut .c-chart__canvas .c-chart__donut-label {
+.c-chart__funnel-conversion {
   font-size: 0.75rem;
   font-weight: 600;
-  fill: var(--atomix-primary-text-emphasis);
-  text-anchor: middle;
-  pointer-events: none;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  font-feature-settings: "tnum";
-  font-variant-numeric: tabular-nums;
-}
-.c-chart--donut .c-chart__canvas .donut-slice, .c-chart--doughnut .c-chart__canvas .donut-slice {
-  animation: chart-donut-draw 1.5s ease-out;
-}
-.c-chart--donut .c-chart__canvas .donut-center,
-.c-chart--donut .c-chart__canvas .c-chart__donut-center, .c-chart--doughnut .c-chart__canvas .donut-center,
-.c-chart--doughnut .c-chart__canvas .c-chart__donut-center {
-  transition: fill 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.c-chart--donut .c-chart__canvas .c-chart__donut-center-bg, .c-chart--doughnut .c-chart__canvas .c-chart__donut-center-bg {
-  fill: var(--atomix-primary-bg-subtle);
-}
-.c-chart--donut .c-chart__canvas .donut-center-label,
-.c-chart--donut .c-chart__canvas .c-chart__donut-center-label, .c-chart--doughnut .c-chart__canvas .donut-center-label,
-.c-chart--doughnut .c-chart__canvas .c-chart__donut-center-label {
-  font-size: 0.875rem;
-  font-weight: 500;
   fill: var(--atomix-secondary-text-emphasis);
   text-anchor: middle;
-  dominant-baseline: central;
-  font-feature-settings: "tnum";
-  font-variant-numeric: tabular-nums;
-}
-.c-chart--donut .c-chart__canvas .c-chart__donut-center-value, .c-chart--doughnut .c-chart__canvas .c-chart__donut-center-value {
-  font-size: 1.5rem;
-  font-weight: 700;
-  fill: var(--atomix-primary-text-emphasis);
-  text-anchor: middle;
-  dominant-baseline: central;
-  font-feature-settings: "tnum";
-  font-variant-numeric: tabular-nums;
+  dominant-baseline: middle;
+  pointer-events: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  opacity: 0.8;
 }
-.c-chart--scatter .c-chart__canvas .scatter-point,
-.c-chart--scatter .c-chart__canvas .c-chart__scatter-point {
-  stroke: var(--atomix-primary-border-subtle);
+.c-chart__heatmap-cell {
+  stroke: var(--atomix-border-color);
   stroke-width: 1;
+  rx: 0.25rem;
+  ry: 0.25rem;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   cursor: pointer;
-  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
-  animation: chart-fade-in 0.6s ease-out;
+  shape-rendering: geometricPrecision;
 }
-.c-chart--scatter .c-chart__canvas .scatter-point:hover,
-.c-chart--scatter .c-chart__canvas .c-chart__scatter-point:hover {
-  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
+.c-chart__heatmap-cell:hover {
+  transform: scale(1.05);
+  transform-origin: center;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.075));
+  stroke-width: 2;
+  z-index: 10;
 }
-.c-chart--scatter .c-chart__canvas .scatter-point:focus-visible,
-.c-chart--scatter .c-chart__canvas .c-chart__scatter-point:focus-visible {
-  outline: 2px solid var(--atomix-primary-border-subtle);
+.c-chart__heatmap-cell--hovered {
+  transform: scale(1.05);
+  transform-origin: center;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.075));
+  stroke-width: 2;
+  z-index: 10;
+}
+.c-chart__heatmap-cell:focus-visible {
+  outline: 2px solid var(--atomix-focus-border-color);
   outline-offset: 2px;
+  box-shadow: 0 0 0 2px var(--atomix-focus-border-color);
 }
-.c-chart--scatter .c-chart__canvas .c-chart__scatter-label {
+.c-chart__heatmap-label {
   font-size: 0.75rem;
-  fill: var(--atomix-primary-text-emphasis);
+  font-weight: 400;
+  fill: var(--atomix-text-primary);
+  text-anchor: middle;
+  dominant-baseline: middle;
   pointer-events: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
-.c-chart--bubble .c-chart__canvas .c-chart__bubble {
-  stroke: var(--atomix-primary-bg-subtle);
-  stroke-width: 2;
-  cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.c-chart--bubble .c-chart__canvas .c-chart__bubble--animated {
-  transition: all 1s ease-out;
-}
-.c-chart--bubble .c-chart__canvas .c-chart__bubble:hover {
-  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
-}
-.c-chart--bubble .c-chart__canvas .c-chart__bubble-label {
+.c-chart__heatmap-axis-label {
   font-size: 0.75rem;
   font-weight: 500;
-  fill: var(--atomix-tertiary-text-emphasis);
+  fill: var(--atomix-secondary-text-emphasis);
+  text-anchor: middle;
+  dominant-baseline: middle;
   pointer-events: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
-.c-chart--bubble .c-chart__canvas .c-chart__bubble-label--center {
-  fill: var(--atomix-invert-text-emphasis);
-  font-weight: 700;
-  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
-}
-.c-chart--radar .c-chart__canvas .c-chart__radar-grid {
-  stroke: var(--atomix-primary-border-subtle);
-  stroke-width: 1;
-  opacity: 0.3;
-}
-.c-chart--radar .c-chart__canvas .c-chart__radar-axis {
-  stroke: var(--atomix-primary-border-subtle);
-  stroke-width: 1;
-  opacity: 0.5;
+.c-chart__heatmap-legend-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  fill: var(--atomix-text-primary);
+  text-anchor: start;
+  dominant-baseline: baseline;
+  pointer-events: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
-.c-chart--radar .c-chart__canvas .c-chart__radar-label {
+.c-chart__heatmap-legend-label {
   font-size: 0.75rem;
+  font-weight: 400;
   fill: var(--atomix-secondary-text-emphasis);
+  text-anchor: start;
+  dominant-baseline: middle;
+  pointer-events: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
-.c-chart--radar .c-chart__canvas .c-chart__radar-fill {
-  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.c-chart--radar .c-chart__canvas .c-chart__radar-fill:hover {
-  opacity: 0.5 !important;
+.c-chart__candlestick-candle {
+  stroke: var(--atomix-border-color);
+  stroke-width: 1;
+  rx: 0.25rem;
+  ry: 0.25rem;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+  shape-rendering: geometricPrecision;
 }
-.c-chart--radar .c-chart__canvas .c-chart__radar-line {
-  fill: none;
-  transition: stroke-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+.c-chart__candlestick-candle:hover {
+  opacity: 0.9;
+  stroke-width: 1.5;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.075));
 }
-.c-chart--radar .c-chart__canvas .c-chart__radar-line:hover {
-  stroke-width: 3 !important;
+.c-chart__candlestick-candle:focus-visible {
+  outline: 2px solid var(--atomix-focus-border-color);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 2px var(--atomix-focus-border-color);
 }
-.c-chart--radar .c-chart__canvas .c-chart__radar-point {
-  stroke: var(--atomix-primary-bg-subtle);
-  stroke-width: 2;
-  cursor: pointer;
+.c-chart__candlestick-wick {
+  stroke: var(--atomix-tertiary-text-emphasis);
+  stroke-width: 1;
+  opacity: 0.8;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  shape-rendering: geometricPrecision;
 }
-.c-chart--radar .c-chart__canvas .c-chart__radar-point:hover {
-  transform: scale(1.3);
-  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
+.c-chart__candlestick-wick:hover {
+  opacity: 1;
+  stroke-width: 1.2;
 }
-.c-chart--candlestick .c-chart__canvas .candlestick,
-.c-chart--candlestick .c-chart__canvas .c-chart__candlestick {
-  stroke-width: 1;
-  cursor: pointer;
+.c-chart__candlestick-volume {
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  animation: chart-fade-in 0.6s ease-out;
+  cursor: pointer;
+  shape-rendering: geometricPrecision;
 }
-.c-chart--candlestick .c-chart__canvas .candlestick--bullish,
-.c-chart--candlestick .c-chart__canvas .c-chart__candlestick--bullish {
-  opacity: 0.8;
+.c-chart__candlestick-volume:hover {
+  opacity: 0.6;
 }
-.c-chart--candlestick .c-chart__canvas .candlestick--bearish,
-.c-chart--candlestick .c-chart__canvas .c-chart__candlestick--bearish {
-  opacity: 1;
+.c-chart__bar {
+  rx: 0.25rem;
+  ry: 0.25rem;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+  shape-rendering: geometricPrecision;
 }
-.c-chart--candlestick .c-chart__canvas .candlestick:hover,
-.c-chart--candlestick .c-chart__canvas .c-chart__candlestick:hover {
-  opacity: 0.8;
-  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
+.c-chart__bar:hover {
+  opacity: 0.85;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.075));
 }
-.c-chart--candlestick .c-chart__canvas .c-chart__candlestick-highlight {
-  stroke-width: 2;
-  opacity: 0.5;
+.c-chart__bar--hovered {
+  opacity: 0.85;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.075));
 }
-.c-chart--candlestick .c-chart__canvas .wick,
-.c-chart--candlestick .c-chart__canvas .c-chart__wick {
-  stroke-width: 1;
-  opacity: 0.8;
+.c-chart__bar:focus-visible {
+  outline: 2px solid var(--atomix-focus-border-color);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 2px var(--atomix-focus-border-color);
 }
-.c-chart--candlestick .c-chart__canvas .wick--hovered,
-.c-chart--candlestick .c-chart__canvas .c-chart__wick--hovered {
-  stroke-width: 2;
+.c-chart__bar-value-label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  fill: var(--atomix-text-primary);
+  text-anchor: middle;
+  pointer-events: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
-.c-chart--candlestick .c-chart__canvas .c-chart__moving-average {
-  stroke-width: 2;
-  opacity: 0.8;
+.c-chart__line-path {
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  shape-rendering: geometricPrecision;
 }
-.c-chart--candlestick .c-chart__canvas .volume-bar {
-  opacity: 0.3;
-  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+.c-chart__area-path {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  shape-rendering: geometricPrecision;
 }
-.c-chart--candlestick .c-chart__canvas .volume-bar:hover {
-  opacity: 0.6;
+.c-chart__area-fill {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  shape-rendering: geometricPrecision;
 }
-.c-chart--gauge .c-chart__canvas .c-chart__gauge-background {
-  fill: var(--atomix-secondary-bg-subtle);
-  stroke: var(--atomix-primary-border-subtle);
-  stroke-width: 1;
+.c-chart__area-point {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+  shape-rendering: geometricPrecision;
 }
-.c-chart--gauge .c-chart__canvas .c-chart__gauge-zone {
-  stroke: var(--atomix-primary-bg-subtle);
-  stroke-width: 2;
+.c-chart__area-point:hover {
+  transform: scale(1.2);
 }
-.c-chart--gauge .c-chart__canvas .c-chart__gauge-tick--major {
-  stroke: var(--atomix-secondary-text-emphasis);
-  stroke-width: 2;
+.c-chart__area-point--hovered {
+  transform: scale(1.2);
 }
-.c-chart--gauge .c-chart__canvas .c-chart__gauge-tick--minor {
-  stroke: var(--atomix-tertiary-text-emphasis);
-  stroke-width: 1;
+.c-chart__area-point:focus-visible {
+  outline: 2px solid var(--atomix-focus-border-color);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 2px var(--atomix-focus-border-color);
 }
-.c-chart--gauge .c-chart__canvas .c-chart__gauge-tick-label {
+.c-chart__point-label {
   font-size: 0.75rem;
-  fill: var(--atomix-secondary-text-emphasis);
+  font-weight: 500;
+  text-anchor: middle;
+  pointer-events: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
-.c-chart--gauge .c-chart__canvas .c-chart__gauge-min-max-label {
-  font-size: 0.875rem;
-  font-weight: 700;
-  fill: var(--atomix-secondary-text-emphasis);
+.c-chart__pie-slice {
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+  shape-rendering: geometricPrecision;
 }
-.c-chart--gauge .c-chart__canvas .c-chart__gauge-needle .c-chart__gauge-needle-line {
+.c-chart__pie-slice:hover {
   stroke-width: 3;
-  stroke-linecap: round;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.075));
 }
-.c-chart--gauge .c-chart__canvas .c-chart__gauge-needle .c-chart__gauge-needle-center {
-  stroke: var(--atomix-primary-bg-subtle);
-  stroke-width: 2;
+.c-chart__pie-slice--hovered {
+  stroke-width: 3;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.075));
 }
-.c-chart--gauge .c-chart__canvas .c-chart__gauge-value {
-  font-size: 2rem;
-  font-weight: 700;
-  fill: var(--atomix-primary-text-emphasis);
+.c-chart__pie-slice:focus-visible {
+  outline: 2px solid var(--atomix-focus-border-color);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 2px var(--atomix-focus-border-color);
 }
-.c-chart--gauge .c-chart__canvas .c-chart__gauge-label {
-  font-size: 0.875rem;
-  fill: var(--atomix-secondary-text-emphasis);
+.c-chart__pie-label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  fill: var(--atomix-text-primary);
+  text-anchor: middle;
+  dominant-baseline: middle;
+  pointer-events: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 }
-.c-chart--funnel .c-chart__canvas .c-chart__funnel-segment {
-  stroke: var(--atomix-primary-bg-subtle);
-  stroke-width: 2;
+.c-chart__donut-slice {
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  shape-rendering: geometricPrecision;
+  transform-origin: center;
 }
-.c-chart--funnel .c-chart__canvas .c-chart__funnel-segment--animated {
-  transition: all 1s ease-out;
+.c-chart__donut-slice:hover {
+  transform: scale(1.02);
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.075));
 }
-.c-chart--funnel .c-chart__canvas .c-chart__funnel-segment:hover {
-  opacity: 0.8;
-  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
+.c-chart__donut-slice--hovered {
+  transform: scale(1.02);
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.075));
 }
-.c-chart--funnel .c-chart__canvas .c-chart__funnel-label {
-  font-size: 0.875rem;
-  font-weight: 700;
+.c-chart__donut-slice:focus-visible {
+  outline: 2px solid var(--atomix-focus-border-color);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 2px var(--atomix-focus-border-color);
+}
+.c-chart__donut-label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  fill: var(--atomix-text-primary);
+  text-anchor: middle;
+  dominant-baseline: middle;
   pointer-events: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 }
-.c-chart--funnel .c-chart__canvas .c-chart__funnel-label--inside {
-  fill: var(--atomix-invert-text-emphasis);
-  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+.c-chart__donut-percentage {
+  font-size: 0.75rem;
+  font-weight: 600;
+  fill: var(--atomix-secondary-text-emphasis);
+  text-anchor: middle;
+  dominant-baseline: middle;
+  pointer-events: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
-.c-chart--funnel .c-chart__canvas .c-chart__funnel-label--outside {
-  fill: var(--atomix-primary-text-emphasis);
+.c-chart__donut-center-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  fill: var(--atomix-secondary-text-emphasis);
+  text-anchor: middle;
+  dominant-baseline: middle;
+  pointer-events: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
-.c-chart--funnel .c-chart__canvas .c-chart__funnel-value {
-  font-size: 0.75rem;
+.c-chart__donut-center-value {
+  font-size: 1.25rem;
+  font-weight: 700;
+  fill: var(--atomix-text-primary);
+  text-anchor: middle;
+  dominant-baseline: middle;
   pointer-events: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
-.c-chart--funnel .c-chart__canvas .c-chart__funnel-value--inside {
-  fill: var(--atomix-invert-text-emphasis);
-  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+.c-chart__scatter-point {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+  shape-rendering: geometricPrecision;
 }
-.c-chart--funnel .c-chart__canvas .c-chart__funnel-value--outside {
-  fill: var(--atomix-secondary-text-emphasis);
+.c-chart__scatter-point:hover {
+  transform: scale(1.2);
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.075));
 }
-.c-chart--funnel .c-chart__canvas .c-chart__funnel-conversion {
-  font-size: 0.75rem;
-  fill: var(--atomix-secondary-text-emphasis);
-  font-style: italic;
+.c-chart__scatter-point:focus-visible {
+  outline: 2px solid var(--atomix-focus-border-color);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 2px var(--atomix-focus-border-color);
 }
-.c-chart--heatmap .c-chart__canvas .c-chart__heatmap-axis-label {
+.c-chart__scatter-label {
   font-size: 0.75rem;
-  fill: var(--atomix-gray-7);
   font-weight: 500;
+  fill: var(--atomix-text-primary);
+  text-anchor: middle;
+  pointer-events: none;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
 }
-.c-chart--heatmap .c-chart__canvas .c-chart__heatmap-cell {
+.c-chart__bubble {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   cursor: pointer;
-  transition: all 0.2s ease;
-  shape-rendering: crispEdges;
+  shape-rendering: geometricPrecision;
 }
-.c-chart--heatmap .c-chart__canvas .c-chart__heatmap-cell--empty {
-  fill: var(--atomix-gray-2);
-  stroke: var(--atomix-gray-3);
-  stroke-width: 0.5;
-  opacity: 0.6;
+.c-chart__bubble:hover {
+  transform: scale(1.1);
+  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
 }
-.c-chart--heatmap .c-chart__canvas .c-chart__heatmap-cell--hovered {
+.c-chart__bubble--hovered {
   transform: scale(1.1);
-  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
-  z-index: 10;
+  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
 }
-.c-chart--heatmap .c-chart__canvas .c-chart__heatmap-cell:focus-visible {
-  outline: 2px solid var(--atomix-primary-6);
-  outline-offset: 1px;
+.c-chart__bubble:focus-visible {
+  outline: 2px solid var(--atomix-focus-border-color);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 2px var(--atomix-focus-border-color);
 }
-.c-chart--heatmap .c-chart__canvas .c-chart__heatmap-value {
-  font-size: 9px;
+.c-chart__bubble-label {
+  font-size: 0.75rem;
   font-weight: 500;
+  fill: var(--atomix-text-primary);
+  text-anchor: middle;
+  dominant-baseline: middle;
   pointer-events: none;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  font-feature-settings: "tnum";
-  font-variant-numeric: tabular-nums;
-}
-.c-chart--heatmap .c-chart__canvas .c-chart__heatmap-value--light {
-  fill: white;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 }
-.c-chart--heatmap .c-chart__canvas .c-chart__heatmap-value--dark {
-  fill: var(--atomix-gray-8);
-}
-.c-chart--heatmap .c-chart__canvas.c-chart--calendar .c-chart__heatmap-cell {
-  rx: 2;
+.c-chart__radar-grid-line {
+  stroke: var(--atomix-border-color);
+  stroke-width: 1;
+  opacity: 0.3;
+  shape-rendering: geometricPrecision;
 }
-.c-chart--heatmap .c-chart__canvas.c-chart--grid .c-chart__heatmap-cell {
-  rx: 4;
+.c-chart__radar-axis-label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  fill: var(--atomix-secondary-text-emphasis);
+  text-anchor: middle;
+  dominant-baseline: middle;
+  pointer-events: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
-.c-chart--treemap .c-chart__canvas .c-chart__treemap-node {
-  cursor: pointer;
-  stroke: var(--atomix-primary-bg-subtle);
-  stroke-width: 1;
+.c-chart__radar-area {
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  shape-rendering: geometricPrecision;
 }
-.c-chart--treemap .c-chart__canvas .c-chart__treemap-node--animated {
-  transition: all 750ms ease-out;
+.c-chart__radar-line {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  shape-rendering: geometricPrecision;
+  stroke-linecap: round;
+  stroke-linejoin: round;
 }
-.c-chart--treemap .c-chart__canvas .c-chart__treemap-node--hovered {
-  opacity: 0.8;
+.c-chart__radar-point {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+  shape-rendering: geometricPrecision;
 }
-.c-chart--treemap .c-chart__canvas .c-chart__treemap-node--selected {
-  stroke-width: 2;
+.c-chart__radar-point:hover {
+  transform: scale(1.3);
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.075));
 }
-.c-chart--treemap .c-chart__canvas .c-chart__treemap-label {
-  font-size: 0.75rem;
-  font-weight: 700;
-  fill: var(--atomix-invert-text-emphasis);
-  pointer-events: none;
+.c-chart__radar-point--hovered {
+  transform: scale(1.3);
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.075));
 }
-.c-chart--treemap .c-chart__canvas .c-chart__treemap-value {
-  font-size: 0.75rem;
-  fill: var(--atomix-invert-text-emphasis);
-  opacity: 0.8;
-  pointer-events: none;
+.c-chart__radar-point:focus-visible {
+  outline: 2px solid var(--atomix-focus-border-color);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 2px var(--atomix-focus-border-color);
 }
-.c-chart--waterfall .c-chart__canvas .c-chart__waterfall-bar {
-  stroke: var(--atomix-primary-bg-subtle);
-  stroke-width: 2;
-  cursor: pointer;
+.c-chart__waterfall-bar {
+  rx: 0.25rem;
+  ry: 0.25rem;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+  shape-rendering: geometricPrecision;
 }
-.c-chart--waterfall .c-chart__canvas .c-chart__waterfall-bar--animated {
-  transition: all 1s ease-out;
+.c-chart__waterfall-bar:hover {
+  opacity: 0.85;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.075));
 }
-.c-chart--waterfall .c-chart__canvas .c-chart__waterfall-bar:hover {
-  opacity: 0.8;
-  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
+.c-chart__waterfall-bar--animated {
+  animation: chart-bar-appear 1s ease-out;
+  transform-origin: bottom center;
+}
+.c-chart__waterfall-bar:focus-visible {
+  outline: 2px solid var(--atomix-focus-border-color);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 2px var(--atomix-focus-border-color);
 }
-.c-chart--waterfall .c-chart__canvas .c-chart__waterfall-value {
+.c-chart__waterfall-value {
   font-size: 0.75rem;
-  font-weight: 700;
+  font-weight: 600;
+  fill: var(--atomix-text-primary);
+  text-anchor: middle;
   pointer-events: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 }
-.c-chart--waterfall .c-chart__canvas .c-chart__waterfall-value--center {
-  fill: var(--atomix-invert-text-emphasis);
-  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+.c-chart__waterfall-value--center {
+  dominant-baseline: middle;
 }
-.c-chart--waterfall .c-chart__canvas .c-chart__waterfall-value--outside {
-  fill: var(--atomix-primary-text-emphasis);
+.c-chart__waterfall-value--outside {
+  dominant-baseline: auto;
 }
-.c-chart--waterfall .c-chart__canvas .c-chart__waterfall-connector {
-  stroke-width: 2;
-  opacity: 0.7;
+.c-chart__waterfall-connector {
+  stroke: var(--atomix-border-color);
+  stroke-width: 1;
+  opacity: 0.6;
+  shape-rendering: geometricPrecision;
 }
-.c-chart--waterfall .c-chart__canvas .c-chart__waterfall-cumulative-line {
-  stroke-width: 3;
+.c-chart__waterfall-cumulative-line {
+  stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  shape-rendering: geometricPrecision;
 }
-.c-chart--waterfall .c-chart__canvas .c-chart__waterfall-cumulative-point {
-  stroke: var(--atomix-primary-bg-subtle);
-  stroke-width: 2;
-}
-@keyframes chart-spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-@keyframes chart-shimmer {
-  0% {
-    left: -100%;
-  }
-  100% {
-    left: 100%;
-  }
-}
-@keyframes chart-pulse {
-  0%, 100% {
-    opacity: 0.8;
-  }
-  50% {
-    opacity: 1;
-  }
-}
-@keyframes chart-draw-line {
-  0% {
-    stroke-dashoffset: 1000;
-  }
-  100% {
-    stroke-dashoffset: 0;
-  }
-}
-@keyframes chart-area-fade {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 0.3;
-  }
+.c-chart__waterfall-cumulative-point {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+  shape-rendering: geometricPrecision;
 }
-@keyframes chart-bar-grow {
-  0% {
-    transform: scaleY(0);
-  }
-  100% {
-    transform: scaleY(1);
-  }
+.c-chart__waterfall-cumulative-point:hover {
+  transform: scale(1.3);
 }
-@keyframes chart-bar-grow-horizontal {
-  0% {
-    transform: scaleX(0);
-  }
-  100% {
-    transform: scaleX(1);
-  }
+.c-chart__waterfall-cumulative-point:focus-visible {
+  outline: 2px solid var(--atomix-focus-border-color);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 2px var(--atomix-focus-border-color);
 }
-@keyframes chart-pie-draw {
-  0% {
-    stroke-dasharray: 0 628;
+@media (prefers-contrast: high) {
+  .c-chart {
+    border-width: calc(var(--atomix-border-width) * 2);
   }
-  100% {
-    stroke-dasharray: 628 628;
+  .c-chart--selected {
+    border-width: calc(var(--atomix-border-width) * 3);
   }
-}
-@keyframes chart-donut-draw {
-  0% {
-    stroke-dasharray: 0 628;
+  .c-chart__action {
+    border-width: calc(var(--atomix-border-width) * 2);
   }
-  100% {
-    stroke-dasharray: 628 628;
+  .c-chart__action:focus-visible {
+    outline-width: calc(var(--atomix-border-width) * 3);
   }
-}
-@keyframes chart-fade-in {
-  0% {
-    opacity: 0;
-    transform: translateY(10px);
+  .c-chart__data-point {
+    stroke-width: 2;
   }
-  100% {
-    opacity: 1;
-    transform: translateY(0);
+  .c-chart__data-point--selected {
+    stroke-width: 3;
   }
-}
-@keyframes chart-scale-in {
-  0% {
-    opacity: 0;
-    transform: scale(0.3);
+  .c-chart__grid {
+    stroke-width: 1;
+    opacity: 0.6;
   }
-  60% {
+  .c-chart__grid--major {
+    stroke-width: 1.5;
     opacity: 0.8;
-    transform: scale(1.1);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-@keyframes chart-slide-in {
-  0% {
-    opacity: 0;
-    transform: translateX(-20px);
   }
-  100% {
+  .c-chart__grid--zero {
+    stroke-width: 2;
     opacity: 1;
-    transform: translateX(0);
-  }
-}
-@keyframes chart-bubble-grow {
-  0% {
-    transform: scale(0);
   }
-  100% {
-    transform: scale(1);
+  .c-chart__treemap-node {
+    stroke-width: 2;
   }
-}
-@keyframes chart-dash-flow {
-  0% {
-    stroke-dashoffset: 0;
+  .c-chart__treemap-node--selected {
+    stroke-width: 3;
   }
-  100% {
-    stroke-dashoffset: 10;
+  .c-chart__treemap-node:focus-visible {
+    outline-width: calc(var(--atomix-border-width) * 3);
   }
-}
-@keyframes chart-glow {
-  0%, 100% {
-    filter: drop-shadow(0 0 5px currentColor);
+  .c-chart__funnel-segment {
+    stroke-width: 2;
   }
-  50% {
-    filter: drop-shadow(0 0 15px currentColor);
+  .c-chart__funnel-segment:focus-visible {
+    outline-width: calc(var(--atomix-border-width) * 3);
   }
-}
-@keyframes chart-pulse-dot {
-  0%, 100% {
-    opacity: 1;
-    transform: scale(1);
+  .c-chart__heatmap-cell {
+    stroke-width: 2;
   }
-  50% {
-    opacity: 0.5;
-    transform: scale(1.2);
+  .c-chart__heatmap-cell--hovered {
+    stroke-width: 3;
   }
-}
-@keyframes chart-zoom-in {
-  0% {
-    transform: scale(0.8);
-    opacity: 0;
+  .c-chart__heatmap-cell:focus-visible {
+    outline-width: calc(var(--atomix-border-width) * 3);
   }
-  100% {
-    transform: scale(1);
-    opacity: 1;
+  .c-chart__candlestick-candle {
+    stroke-width: 2;
   }
-}
-@keyframes chart-slide-up {
-  0% {
-    transform: translateY(20px);
-    opacity: 0;
+  .c-chart__candlestick-candle:focus-visible {
+    outline-width: calc(var(--atomix-border-width) * 3);
   }
-  100% {
-    transform: translateY(0);
+  .c-chart__candlestick-wick {
+    stroke-width: 2;
     opacity: 1;
   }
 }
-@media (max-width: 768px) {
+@media (prefers-reduced-motion: reduce) {
   .c-chart {
-    --atomix-chart-min-height: 10rem;
-    border-radius: 0.25rem;
+    transition: none;
+    animation: none;
   }
-  .c-chart__header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.5rem;
+  .c-chart::before, .c-chart::after {
+    animation: none;
+    transition: none;
   }
-  .c-chart__toolbar {
-    width: 100%;
-    justify-content: flex-end;
-    padding: 0.5rem;
-    gap: 0.5rem;
+  .c-chart--elevated {
+    transform: none;
   }
-}
-@media (max-width: 768px) and (max-width: 480px) {
-  .c-chart__toolbar {
-    flex-wrap: wrap;
-    justify-content: center;
+  .c-chart--elevated:hover {
+    transform: none;
   }
-}
-@media (max-width: 768px) {
-  .c-chart__action {
-    width: 2.25rem;
-    height: 2.25rem;
+  .c-chart--clickable {
+    transition: none;
   }
-  .c-chart__action svg {
-    width: 1.125rem;
-    height: 1.125rem;
+  .c-chart--clickable:hover {
+    transform: none;
   }
-  .c-chart__export-dropdown {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    margin-top: 0;
-    min-width: 12.5rem;
-    max-width: 90vw;
-  }
-  .c-chart__legend {
-    flex-direction: column;
-    gap: 0.5rem;
+  .c-chart--clickable:active {
+    transform: none;
   }
-  .c-chart__legend-item {
-    justify-content: space-between;
-    width: 100%;
+  .c-chart__action {
+    transition: none;
   }
-  .c-chart:hover {
+  .c-chart__action:hover {
     transform: none;
   }
-}
-@media (max-width: 480px) {
-  .c-chart {
-    --atomix-chart-min-height: 9rem;
-    --atomix-chart-padding: 0.5rem;
-    border-radius: 0.25rem;
+  .c-chart__action svg {
+    transition: none;
   }
-  .c-chart__title {
-    font-size: 1.125rem;
-    margin-bottom: 0.25rem;
+  .c-chart__action svg:hover {
+    transform: none;
   }
-  .c-chart__subtitle {
-    font-size: 0.75rem;
+  .c-chart__data-point {
+    transition: none;
   }
-  .c-chart__toolbar {
-    padding: 0.25rem;
-    gap: 0.25rem;
-    border-radius: 0.25rem;
+  .c-chart__data-point--hovered {
+    transform: none;
   }
-  .c-chart__action {
-    width: 1.75rem;
-    height: 1.75rem;
-    font-size: 0.75rem;
+  .c-chart__treemap-node {
+    transition: none;
   }
-  .c-chart__action svg {
-    width: 0.875rem;
-    height: 0.875rem;
+  .c-chart__treemap-node:hover {
+    transform: none;
   }
-  .c-chart__export-option {
-    padding: 0.25rem 0.5rem;
-    font-size: 0.6875rem;
+  .c-chart__treemap-node--hovered {
+    transform: none;
   }
-}
-@media (prefers-reduced-motion: reduce) {
-  .c-chart {
+  .c-chart__funnel-segment {
     transition: none;
   }
-  .c-chart:hover {
+  .c-chart__funnel-segment:hover {
     transform: none;
   }
-  .c-chart * {
-    animation-duration: 0.01s !important;
-    transition-duration: 0.01s !important;
-  }
-  .c-chart__real-time-indicator::before {
-    animation: none;
+  .c-chart__heatmap-cell {
+    transition: none;
   }
-}
-.c-chart:focus-within .c-chart__data-point:focus {
-  outline: 2px solid var(--atomix-primary-6);
-  outline-offset: 2px;
-  z-index: 10;
-}
-.c-chart:focus-within__canvas svg {
-  outline: 2px solid var(--atomix-primary-border-subtle);
-  outline-offset: 2px;
-}
-@media (prefers-contrast: high) {
-  .c-chart {
-    border-width: 2px;
-    background-color: white;
-    color: black;
-    -webkit-backdrop-filter: none;
-            backdrop-filter: none;
+  .c-chart__heatmap-cell:hover {
+    transform: none;
   }
-  .c-chart__grid {
-    stroke-width: 2;
-    opacity: 0.8;
-    stroke: black;
+  .c-chart__heatmap-cell--hovered {
+    transform: none;
   }
-  .c-chart__title {
-    color: black;
+  .c-chart__candlestick-candle {
+    transition: none;
   }
-  .c-chart__data-point {
-    stroke: black;
-    stroke-width: 2;
+  .c-chart__candlestick-candle:hover {
+    transform: none;
   }
-  .c-chart__crosshair line {
-    stroke: black;
-    opacity: 1;
+  .c-chart__candlestick-wick {
+    transition: none;
   }
-  .c-chart__zoom-indicator {
-    background: black;
-    color: white;
-    border: 2px solid white;
+  .c-chart__candlestick-volume {
+    transition: none;
   }
-  .c-chart .line-path {
-    stroke-width: 3 !important;
+  .c-chart__empty {
+    animation: none;
   }
-  .c-chart .bar {
-    stroke: black;
-    stroke-width: 2;
+  .c-chart--loading .c-chart__content::after {
+    animation: none;
   }
-}
-@media print {
-  .c-chart {
-    page-break-inside: avoid;
-    -moz-column-break-inside: avoid;
-         break-inside: avoid;
-    box-shadow: none;
-    border: 2px solid black;
-    background: white;
+  .c-chart__waterfall-bar--animated {
+    animation: none;
   }
-  .c-chart__toolbar {
-    display: none;
+  .c-chart__canvas svg {
+    animation: none;
+    opacity: 1;
   }
-  .c-chart__crosshair, .c-chart__zoom-indicator, .c-chart__real-time-indicator {
-    display: none;
+}
+@keyframes chart-bar-appear {
+  0% {
+    opacity: 0;
+    transform: scaleY(0);
   }
-  .c-chart * {
-    animation: none !important;
-    transition: none !important;
+  100% {
+    opacity: 1;
+    transform: scaleY(1);
   }
 }
 .c-checkbox-group {
@@ -4732,23 +4403,50 @@ a, a:hover {
   cursor: pointer;
   padding: 0.5rem;
   border-radius: 50%;
-  transition: background-color 0.2s ease;
+  transition: background-color 0.2s ease, opacity 0.2s ease;
   color: var(--atomix-body-color);
 }
-.c-color-mode-toggle:hover {
+.c-color-mode-toggle:hover:not(:disabled) {
   background-color: rgba(0, 0, 0, 0.05);
 }
-.c-color-mode-toggle:focus {
+.c-color-mode-toggle:focus-visible {
   outline: none;
   box-shadow: 0 0 0 2px var(--atomix-primary);
 }
+.c-color-mode-toggle:active:not(:disabled) {
+  transform: scale(0.95);
+}
 .c-color-mode-toggle svg {
-  width: 1.5rem;
-  height: 1.5rem;
+  display: block;
+  transition: transform 0.2s ease;
+}
+.c-color-mode-toggle--sm {
+  padding: 0.375rem;
+}
+.c-color-mode-toggle--md {
+  padding: 0.5rem;
+}
+.c-color-mode-toggle--lg {
+  padding: 0.625rem;
+}
+.c-color-mode-toggle--disabled, .c-color-mode-toggle:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
 }
-[data-atomix-theme=dark] .c-color-mode-toggle:hover {
+[data-atomix-theme=dark] .c-color-mode-toggle:hover:not(:disabled) {
   background-color: rgba(255, 255, 255, 0.1);
 }
+@media (prefers-reduced-motion: reduce) {
+  .c-color-mode-toggle {
+    transition: none;
+  }
+  .c-color-mode-toggle svg {
+    transition: none;
+  }
+  .c-color-mode-toggle:active:not(:disabled) {
+    transform: none;
+  }
+}
 .c-countdown {
   --atomix-countdown-color: var(--atomix-body-color);
   --atomix-countdown-font-size: 1rem;
@@ -4988,20 +4686,27 @@ a, a:hover {
   display: flex;
   opacity: 0;
   visibility: hidden;
-  transform-origin: top center;
   transition: opacity var(--atomix-dropdown-animation-duration) var(--atomix-dropdown-animation-timing), visibility var(--atomix-dropdown-animation-duration) var(--atomix-dropdown-animation-timing), transform var(--atomix-dropdown-animation-duration) var(--atomix-dropdown-animation-timing);
-  transform: translateY(-15px) scale(0.95);
   pointer-events: none;
+}
+.c-dropdown__menu-wrapper:not(.is-glass) {
   will-change: transform, opacity, visibility;
+  transform: translateY(-15px) scale(0.95);
+  transform-origin: top center;
 }
-.c-dropdown__menu-wrapper.is-open {
+.c-dropdown__menu-wrapper.is-open:not(.is-glass) {
   opacity: 1;
   transform: translateY(0) scale(1);
   visibility: visible;
   animation: atomix-dropdown-fade-in var(--atomix-dropdown-animation-duration) var(--atomix-dropdown-animation-timing) forwards;
   pointer-events: auto;
 }
-.c-dropdown__menu-wrapper:not(.is-open) {
+.c-dropdown__menu-wrapper.is-open.is-glass {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}
+.c-dropdown__menu-wrapper:not(.is-open):not(.is-glass) {
   animation: atomix-dropdown-fade-out var(--atomix-dropdown-animation-duration) var(--atomix-dropdown-animation-timing) forwards;
 }
 .c-dropdown__menu-wrapper--bottom-start {
@@ -5522,22 +5227,41 @@ a, a:hover {
   --atomix-footer-padding-x: 1rem;
   --atomix-footer-padding-y: 3rem;
   --atomix-footer-container-max-width: 1200px;
-  --atomix-footer-bg: var(--atomix-surface);
-  --atomix-footer-color: var(--atomix-text);
+  --atomix-footer-bg: var(--atomix-primary-bg);
+  --atomix-footer-color: var(--atomix-primary-text-emphasis);
   --atomix-footer-border-width: 1px;
-  --atomix-footer-border-color: var(--atomix-border);
+  --atomix-footer-border-color: var(--atomix-primary-border-subtle);
   --atomix-footer-brand-margin-bottom: 1.5rem;
   --atomix-footer-section-margin-bottom: 2rem;
   --atomix-footer-social-gap: 0.75rem;
   --atomix-footer-newsletter-padding: 1.5rem;
   --atomix-footer-bottom-padding-top: 1.5rem;
   --atomix-footer-bottom-margin-top: 2rem;
+  --atomix-footer-brand-logo-margin-bottom: 1rem;
+  --atomix-footer-brand-logo-hover-opacity: 0.8;
+  --atomix-footer-section-header-gap: 0.5rem;
+  --atomix-footer-section-toggle-padding: 0.75rem 0;
+  --atomix-footer-bg-rgb: var(--atomix-primary-bg);
+  --atomix-disabled-opacity: 0.6;
   background-color: var(--atomix-footer-bg);
   color: var(--atomix-footer-color);
   border-top: var(--atomix-footer-border-width) solid var(--atomix-footer-border-color);
   padding: var(--atomix-footer-padding-y) 0;
   position: relative;
 }
+.c-footer--glass {
+  padding: 0;
+  margin: 0;
+  border-radius: 0;
+  box-shadow: none;
+  background: transparent;
+}
+.c-footer--glass .c-footer__glass {
+  background-color: rgba(var(--atomix-footer-bg-rgb), 0.5, true);
+  color: var(--atomix-footer-color);
+  border-top: var(--atomix-footer-border-width) solid var(--atomix-footer-border-color);
+  padding: var(--atomix-footer-padding-y) 0;
+}
 .c-footer__container {
   display: flex;
   flex-direction: column;
@@ -5547,28 +5271,42 @@ a, a:hover {
   padding: 0 var(--atomix-footer-padding-x);
 }
 .c-footer__sections {
-  display: grid;
-  grid-gap: var(--atomix-footer-section-margin-bottom);
-  gap: var(--atomix-footer-section-margin-bottom);
   margin-bottom: var(--atomix-footer-bottom-margin-top);
-  grid-template-columns: 1fr;
+  width: 100%;
+  max-width: var(--atomix-footer-container-max-width);
+  margin-left: auto;
+  margin-right: auto;
 }
-@media (min-width: 768px) {
-  .c-footer__sections {
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: clamp(2rem, 4vw, 3rem);
-  }
+.c-footer__sections--centered {
+  justify-content: center;
+  align-items: center;
+}
+.c-footer__sections--stacked {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: clamp(1.5rem, 4vw, 2.5rem);
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
 }
 .c-footer__brand {
+  grid-area: brand;
   margin-bottom: var(--atomix-footer-brand-margin-bottom);
 }
+@media (min-width: 768px) {
+  .c-footer__brand {
+    margin-bottom: 0;
+  }
+}
 .c-footer__brand-logo {
   display: inline-block;
-  margin-bottom: 1rem;
+  margin-bottom: var(--atomix-footer-brand-logo-margin-bottom);
   transition: opacity 0.2s ease;
 }
 .c-footer__brand-logo:hover {
-  opacity: 0.8;
+  opacity: var(--atomix-footer-brand-logo-hover-opacity);
 }
 .c-footer__brand-logo img {
   max-width: 200px;
@@ -5581,18 +5319,23 @@ a, a:hover {
   margin: 0;
   font-size: clamp(1.25rem, 2.5vw, 1.5rem);
   font-weight: 600;
-  color: var(--atomix-text-emphasis);
+  color: var(--atomix-primary-text-emphasis);
   line-height: 1.2;
 }
 .c-footer__brand-description {
   margin-top: 0.5rem;
   font-size: 0.875rem;
-  color: var(--atomix-text-muted);
+  color: var(--atomix-secondary-text-emphasis);
   line-height: 1.6;
   max-width: 35ch;
 }
 .c-footer__section {
-  margin-bottom: var(--atomix-footer-section-margin-bottom);
+  margin-bottom: 0;
+}
+@media (max-width: 575.98px) {
+  .c-footer__section {
+    margin-bottom: var(--atomix-footer-section-margin-bottom);
+  }
 }
 .c-footer__section-header {
   margin-bottom: 1rem;
@@ -5600,14 +5343,14 @@ a, a:hover {
 .c-footer__section-header-content {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--atomix-footer-section-header-gap);
 }
 .c-footer__section-toggle {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: 0.75rem 0;
+  padding: var(--atomix-footer-section-toggle-padding);
   background: none;
   border: none;
   cursor: pointer;
@@ -5626,9 +5369,10 @@ a, a:hover {
 }
 .c-footer__section-title {
   margin: 0;
+  width: 100%;
   font-size: 1.125rem;
   font-weight: 600;
-  color: var(--atomix-text-emphasis);
+  color: var(--atomix-primary-text-emphasis);
   line-height: 1.3;
 }
 .c-footer__section-icon {
@@ -5640,7 +5384,7 @@ a, a:hover {
 .c-footer__section-chevron {
   font-size: 0.875rem;
   transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  color: var(--atomix-text-muted);
+  color: var(--atomix-gray-6);
 }
 .c-footer__section-content {
   display: flex;
@@ -5675,9 +5419,9 @@ a, a:hover {
   align-items: center;
   gap: 0.5rem;
   padding: 0.25rem 0;
-  color: var(--atomix-text);
+  color: var(--atomix-primary-text-emphasis);
   text-decoration: none;
-  transition: color 0.15s ease-in-out;
+  transition: all 0.15s ease-in-out;
   border-radius: 0.25rem;
   position: relative;
 }
@@ -5693,7 +5437,7 @@ a, a:hover {
 }
 .c-footer__link:hover, .c-footer__link:focus {
   color: var(--atomix-primary);
-  text-decoration: underline;
+  text-decoration: none;
 }
 .c-footer__link:hover::before, .c-footer__link:focus::before {
   width: 100%;
@@ -5710,10 +5454,10 @@ a, a:hover {
   width: 100%;
 }
 .c-footer__link--disabled {
-  color: var(--atomix-text-disabled);
+  color: var(--atomix-disabled-text-emphasis);
   cursor: not-allowed;
   pointer-events: none;
-  opacity: 0.6;
+  opacity: var(--atomix-disabled-opacity);
 }
 .c-footer__link-icon {
   display: flex;
@@ -5744,11 +5488,11 @@ a, a:hover {
   justify-content: center;
   width: 2.5rem;
   height: 2.5rem;
-  background-color: var(--atomix-surface-variant);
-  color: var(--atomix-text);
+  background-color: var(--atomix-secondary-bg-subtle);
+  color: var(--atomix-primary-text-emphasis);
   border-radius: 50%;
   text-decoration: none;
-  transition: all 0.15s ease-in-out;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
   overflow: hidden;
 }
@@ -5762,7 +5506,7 @@ a, a:hover {
 }
 .c-footer__social-link:hover, .c-footer__social-link:focus {
   background-color: var(--atomix-primary);
-  color: var(--atomix-primary-contrast);
+  color: var(--atomix-component-active-color);
   transform: translateY(-3px) scale(1.05);
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
 }
@@ -5782,7 +5526,7 @@ a, a:hover {
   height: 3rem;
 }
 .c-footer__social-link--disabled {
-  opacity: 0.5;
+  opacity: var(--atomix-disabled-opacity);
   cursor: not-allowed;
   pointer-events: none;
 }
@@ -5829,7 +5573,7 @@ a, a:hover {
   background: linear-gradient(135deg, #25d366, #66bb6a);
 }
 .c-footer__newsletter {
-  background-color: linear-gradient(135deg, var(--atomix-surface-variant), rgba(var(--atomix-surface-variant), 0.8));
+  background-color: linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8));
   padding: 1.5rem;
   border-radius: 0.5rem;
   border: 1px solid var(--atomix-border-subtle);
@@ -5849,20 +5593,24 @@ a, a:hover {
   margin: 0 0 0.5rem 0;
   font-size: clamp(1.125rem, 2vw, 1.125rem);
   font-weight: 600;
-  color: var(--atomix-text-emphasis);
+  color: var(--atomix-primary-text-emphasis);
   line-height: 1.3;
 }
 .c-footer__newsletter-description {
   margin: 0 0 1rem 0;
   font-size: 0.875rem;
-  color: var(--atomix-text-muted);
+  color: var(--atomix-secondary-text-emphasis);
   line-height: 1.6;
   max-width: 45ch;
+  width: 100%;
+  box-sizing: border-box;
 }
 .c-footer__newsletter-form {
   display: flex;
   gap: 0.75rem;
   align-items: flex-end;
+  width: 100%;
+  max-width: 100%;
 }
 @media (max-width: 575.98px) {
   .c-footer__newsletter-form {
@@ -5885,12 +5633,13 @@ a, a:hover {
   flex: 1 1;
   padding: 0.75rem 1rem;
   font-size: 0.875rem;
-  background-color: var(--atomix-surface);
-  color: var(--atomix-text);
-  border: 1px solid var(--atomix-border);
+  background-color: var(--atomix-primary-bg-subtle);
+  color: var(--atomix-primary-text-emphasis);
+  border: 1px solid var(--atomix-primary-border);
   border-radius: 0.375rem;
   outline: none;
   transition: all 0.3s ease;
+  box-sizing: border-box;
 }
 .c-footer__newsletter-input:focus {
   border-color: var(--atomix-primary);
@@ -5898,12 +5647,12 @@ a, a:hover {
   transform: translateY(-1px);
 }
 .c-footer__newsletter-input::-moz-placeholder {
-  color: var(--atomix-text-muted);
+  color: var(--atomix-gray-6);
   -moz-transition: opacity 0.3s ease;
   transition: opacity 0.3s ease;
 }
 .c-footer__newsletter-input::placeholder {
-  color: var(--atomix-text-muted);
+  color: var(--atomix-gray-6);
   transition: opacity 0.3s ease;
 }
 .c-footer__newsletter-input:focus::-moz-placeholder {
@@ -5914,13 +5663,13 @@ a, a:hover {
 }
 .c-footer__newsletter-button {
   padding: 0.75rem 1.5rem;
-  background-color: var(--atomix-primary);
-  color: var(--atomix-primary-contrast);
+  background-color: var(--atomix-brand-bg-subtle);
+  color: var(--atomix-brand-text-emphasis);
   border: none;
   border-radius: 0.375rem;
   font-weight: 500;
   cursor: pointer;
-  transition: background-color 0.15s ease-in-out;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   white-space: nowrap;
   position: relative;
   overflow: hidden;
@@ -5934,7 +5683,7 @@ a, a:hover {
   transition: transform 0.6s ease;
 }
 .c-footer__newsletter-button:hover, .c-footer__newsletter-button:focus {
-  background-color: var(--atomix-primary-hover);
+  background-color: var(--atomix-secondary-bg-subtle);
   transform: translateY(-2px);
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
 }
@@ -5950,7 +5699,7 @@ a, a:hover {
   align-items: center;
   justify-content: space-between;
   padding-top: var(--atomix-footer-bottom-padding-top);
-  border-top: 1px solid var(--atomix-border);
+  border-top: 1px solid var(--atomix-primary-border-subtle);
   position: relative;
 }
 @media (max-width: 575.98px) {
@@ -5962,7 +5711,7 @@ a, a:hover {
 }
 .c-footer__copyright {
   font-size: 0.875rem;
-  color: var(--atomix-text-muted);
+  color: var(--atomix-tertiary-text-emphasis);
   line-height: 1.5;
 }
 .c-footer__copyright a {
@@ -5979,16 +5728,18 @@ a, a:hover {
   align-items: center;
   gap: 0.5rem;
   padding: 0.75rem 1.25rem;
-  background-color: var(--atomix-surface-variant);
+  background-color: var(--atomix-secondary-bg);
   border: 1px solid var(--atomix-border-subtle);
-  color: var(--atomix-text);
+  color: var(--atomix-primary-text-emphasis);
   font-size: 0.875rem;
   font-weight: 500;
   cursor: pointer;
-  transition: color 0.15s ease-in-out;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   border-radius: 2rem;
   position: relative;
   overflow: hidden;
+  text-decoration: none;
+  outline: none;
 }
 .c-footer__back-to-top::before {
   content: "";
@@ -5996,14 +5747,14 @@ a, a:hover {
   inset: 0;
   background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
   transform: translateX(-100%);
-  transition: transform 0.6s ease;
+  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .c-footer__back-to-top:hover, .c-footer__back-to-top:focus {
-  color: var(--atomix-primary);
+  color: var(--atomix-secondary-text-emphasis);
   background-color: var(--atomix-primary);
   border-color: var(--atomix-primary);
-  transform: translateY(-2px);
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  transform: translateY(-3px);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
 }
 .c-footer__back-to-top:hover::before, .c-footer__back-to-top:focus::before {
   transform: translateX(100%);
@@ -6011,6 +5762,10 @@ a, a:hover {
 .c-footer__back-to-top:hover .c-footer__back-to-top-icon, .c-footer__back-to-top:focus .c-footer__back-to-top-icon {
   transform: translateY(-2px);
 }
+.c-footer__back-to-top:active {
+  transform: translateY(-1px);
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
+}
 .c-footer__back-to-top:focus-visible {
   outline: 2px solid var(--atomix-primary);
   outline-offset: 2px;
@@ -6018,7 +5773,7 @@ a, a:hover {
 .c-footer__back-to-top-icon {
   font-size: 1.25em;
   font-weight: bold;
-  transition: transform 0.3s ease;
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 @media (max-width: 575.98px) {
   .c-footer__back-to-top-text {
@@ -6029,30 +5784,12 @@ a, a:hover {
   margin: 2rem 0;
   border: none;
   height: 1px;
-  background: linear-gradient(90deg, transparent, 1px solid var(--atomix-border), transparent);
+  background: linear-gradient(90deg, transparent, 1px solid var(--atomix-primary-border-subtle), transparent);
   opacity: 0.5;
 }
-@media (min-width: 768px) {
-  .c-footer--columns .c-footer__sections {
-    display: grid;
-    grid-template-columns: minmax(300px, 1fr) 2fr minmax(250px, 1fr);
-    grid-gap: clamp(2rem, 5vw, 4rem);
-    gap: clamp(2rem, 5vw, 4rem);
-    align-items: start;
-  }
-}
-@media (min-width: 992px) {
-  .c-footer--columns .c-footer__sections {
-    grid-template-columns: minmax(350px, 1fr) 3fr minmax(300px, 1fr);
-  }
-}
 .c-footer--centered {
   text-align: center;
 }
-.c-footer--centered .c-footer__sections {
-  justify-content: center;
-  align-items: center;
-}
 .c-footer--centered .c-footer__social {
   justify-content: center;
 }
@@ -6062,13 +5799,14 @@ a, a:hover {
 }
 .c-footer--minimal {
   --atomix-footer-padding-y: 2rem;
+  --atomix-footer-social-gap: 0.75;
 }
 .c-footer--minimal .c-footer__sections {
   margin-bottom: 1rem;
   gap: 1.5rem;
 }
 .c-footer--minimal .c-footer__section {
-  margin-bottom: 1rem;
+  margin-bottom: 0;
 }
 .c-footer--minimal .c-footer__newsletter {
   padding: 1.5rem;
@@ -6083,15 +5821,26 @@ a, a:hover {
   margin-left: auto;
   margin-right: auto;
 }
+.c-footer--flexible .c-footer__section-col {
+  flex: 1 1 auto;
+  min-width: 250px;
+}
+.c-footer--sidebar .c-footer__sections--columns {
+  align-items: flex-start;
+}
+.c-footer--wide .c-footer__sections {
+  max-width: 100%;
+  padding: 0 1rem;
+}
 .c-footer--sm {
   --atomix-footer-padding-y: 2rem;
   --atomix-footer-section-margin-bottom: 1.5rem;
-  --atomix-footer-brand-margin-bottom: 1rem;
   --atomix-footer-social-gap: 0.75rem;
 }
 .c-footer--md {
   --atomix-footer-padding-y: 3rem;
   --atomix-footer-section-margin-bottom: 2rem;
+  --atomix-footer-social-gap: 1rem;
 }
 .c-footer--lg {
   --atomix-footer-padding-y: 4rem;
@@ -6105,7 +5854,7 @@ a, a:hover {
 .c-footer--primary {
   --atomix-footer-bg: var(--atomix-primary-bg-subtle);
   --atomix-footer-border-color: var(--atomix-primary-border-subtle);
-  --atomix-footer-color: var(--atomix-primary-text);
+  --atomix-footer-color: var(--atomix-primary-text-emphasis);
 }
 .c-footer--primary .c-footer__brand-name h3,
 .c-footer--primary .c-footer__section-title {
@@ -6113,10 +5862,10 @@ a, a:hover {
 }
 .c-footer--primary .c-footer__brand-description,
 .c-footer--primary .c-footer__copyright {
-  color: var(--atomix-primary-text-muted);
+  color: var(--atomix-gray-6);
 }
 .c-footer--primary .c-footer__link {
-  color: var(--atomix-primary-text);
+  color: var(--atomix-primary-text-emphasis);
 }
 .c-footer--primary .c-footer__link:hover, .c-footer--primary .c-footer__link:focus {
   color: var(--atomix-primary);
@@ -6125,8 +5874,8 @@ a, a:hover {
   background-color: var(--atomix-primary);
 }
 .c-footer--primary .c-footer__newsletter {
-  background: linear-gradient(135deg, var(--atomix-primary-bg), rgba(var(--atomix-primary-bg-rgb), 0.8));
-  border-color: var(--atomix-primary-border);
+  background: linear-gradient(135deg, var(--atomix-primary-bg-subtle), rgba(var(--atomix-primary-bg-subtle), 0.8));
+  border-color: var(--atomix-primary-border-subtle);
 }
 .c-footer--primary .c-footer__newsletter::before {
   background: linear-gradient(90deg, transparent, var(--atomix-primary), transparent);
@@ -6134,7 +5883,7 @@ a, a:hover {
 .c-footer--secondary {
   --atomix-footer-bg: var(--atomix-secondary-bg-subtle);
   --atomix-footer-border-color: var(--atomix-secondary-border-subtle);
-  --atomix-footer-color: var(--atomix-secondary-text);
+  --atomix-footer-color: var(--atomix-secondary-text-emphasis);
 }
 .c-footer--secondary .c-footer__brand-name h3,
 .c-footer--secondary .c-footer__section-title {
@@ -6142,10 +5891,10 @@ a, a:hover {
 }
 .c-footer--secondary .c-footer__brand-description,
 .c-footer--secondary .c-footer__copyright {
-  color: var(--atomix-secondary-text-muted);
+  color: var(--atomix-gray-6);
 }
 .c-footer--secondary .c-footer__link {
-  color: var(--atomix-secondary-text);
+  color: var(--atomix-secondary-text-emphasis);
 }
 .c-footer--secondary .c-footer__link:hover, .c-footer--secondary .c-footer__link:focus {
   color: var(--atomix-secondary);
@@ -6154,8 +5903,8 @@ a, a:hover {
   background-color: var(--atomix-secondary);
 }
 .c-footer--secondary .c-footer__newsletter {
-  background: linear-gradient(135deg, var(--atomix-secondary-bg), rgba(var(--atomix-secondary-bg-rgb), 0.8));
-  border-color: var(--atomix-secondary-border);
+  background: linear-gradient(135deg, var(--atomix-secondary-bg-subtle), rgba(var(--atomix-secondary-bg-subtle), 0.8));
+  border-color: var(--atomix-secondary-border-subtle);
 }
 .c-footer--secondary .c-footer__newsletter::before {
   background: linear-gradient(90deg, transparent, var(--atomix-secondary), transparent);
@@ -6163,7 +5912,7 @@ a, a:hover {
 .c-footer--tertiary {
   --atomix-footer-bg: var(--atomix-tertiary-bg-subtle);
   --atomix-footer-border-color: var(--atomix-tertiary-border-subtle);
-  --atomix-footer-color: var(--atomix-tertiary-text);
+  --atomix-footer-color: var(--atomix-tertiary-text-emphasis);
 }
 .c-footer--tertiary .c-footer__brand-name h3,
 .c-footer--tertiary .c-footer__section-title {
@@ -6171,10 +5920,10 @@ a, a:hover {
 }
 .c-footer--tertiary .c-footer__brand-description,
 .c-footer--tertiary .c-footer__copyright {
-  color: var(--atomix-tertiary-text-muted);
+  color: var(--atomix-gray-6);
 }
 .c-footer--tertiary .c-footer__link {
-  color: var(--atomix-tertiary-text);
+  color: var(--atomix-tertiary-text-emphasis);
 }
 .c-footer--tertiary .c-footer__link:hover, .c-footer--tertiary .c-footer__link:focus {
   color: var(--atomix-tertiary);
@@ -6183,8 +5932,8 @@ a, a:hover {
   background-color: var(--atomix-tertiary);
 }
 .c-footer--tertiary .c-footer__newsletter {
-  background: linear-gradient(135deg, var(--atomix-tertiary-bg), rgba(var(--atomix-tertiary-bg-rgb), 0.8));
-  border-color: var(--atomix-tertiary-border);
+  background: linear-gradient(135deg, var(--atomix-tertiary-bg-subtle), rgba(var(--atomix-tertiary-bg-subtle), 0.8));
+  border-color: var(--atomix-tertiary-border-subtle);
 }
 .c-footer--tertiary .c-footer__newsletter::before {
   background: linear-gradient(90deg, transparent, var(--atomix-tertiary), transparent);
@@ -6192,7 +5941,7 @@ a, a:hover {
 .c-footer--invert {
   --atomix-footer-bg: var(--atomix-invert-bg-subtle);
   --atomix-footer-border-color: var(--atomix-invert-border-subtle);
-  --atomix-footer-color: var(--atomix-invert-text);
+  --atomix-footer-color: var(--atomix-invert-text-emphasis);
 }
 .c-footer--invert .c-footer__brand-name h3,
 .c-footer--invert .c-footer__section-title {
@@ -6200,10 +5949,10 @@ a, a:hover {
 }
 .c-footer--invert .c-footer__brand-description,
 .c-footer--invert .c-footer__copyright {
-  color: var(--atomix-invert-text-muted);
+  color: var(--atomix-gray-6);
 }
 .c-footer--invert .c-footer__link {
-  color: var(--atomix-invert-text);
+  color: var(--atomix-invert-text-emphasis);
 }
 .c-footer--invert .c-footer__link:hover, .c-footer--invert .c-footer__link:focus {
   color: var(--atomix-invert);
@@ -6212,8 +5961,8 @@ a, a:hover {
   background-color: var(--atomix-invert);
 }
 .c-footer--invert .c-footer__newsletter {
-  background: linear-gradient(135deg, var(--atomix-invert-bg), rgba(var(--atomix-invert-bg-rgb), 0.8));
-  border-color: var(--atomix-invert-border);
+  background: linear-gradient(135deg, var(--atomix-invert-bg-subtle), rgba(var(--atomix-invert-bg-subtle), 0.8));
+  border-color: var(--atomix-invert-border-subtle);
 }
 .c-footer--invert .c-footer__newsletter::before {
   background: linear-gradient(90deg, transparent, var(--atomix-invert), transparent);
@@ -6221,7 +5970,7 @@ a, a:hover {
 .c-footer--brand {
   --atomix-footer-bg: var(--atomix-brand-bg-subtle);
   --atomix-footer-border-color: var(--atomix-brand-border-subtle);
-  --atomix-footer-color: var(--atomix-brand-text);
+  --atomix-footer-color: var(--atomix-brand-text-emphasis);
 }
 .c-footer--brand .c-footer__brand-name h3,
 .c-footer--brand .c-footer__section-title {
@@ -6229,10 +5978,10 @@ a, a:hover {
 }
 .c-footer--brand .c-footer__brand-description,
 .c-footer--brand .c-footer__copyright {
-  color: var(--atomix-brand-text-muted);
+  color: var(--atomix-gray-6);
 }
 .c-footer--brand .c-footer__link {
-  color: var(--atomix-brand-text);
+  color: var(--atomix-brand-text-emphasis);
 }
 .c-footer--brand .c-footer__link:hover, .c-footer--brand .c-footer__link:focus {
   color: var(--atomix-brand);
@@ -6241,8 +5990,8 @@ a, a:hover {
   background-color: var(--atomix-brand);
 }
 .c-footer--brand .c-footer__newsletter {
-  background: linear-gradient(135deg, var(--atomix-brand-bg), rgba(var(--atomix-brand-bg-rgb), 0.8));
-  border-color: var(--atomix-brand-border);
+  background: linear-gradient(135deg, var(--atomix-brand-bg-subtle), rgba(var(--atomix-brand-bg-subtle), 0.8));
+  border-color: var(--atomix-brand-border-subtle);
 }
 .c-footer--brand .c-footer__newsletter::before {
   background: linear-gradient(90deg, transparent, var(--atomix-brand), transparent);
@@ -6250,7 +5999,7 @@ a, a:hover {
 .c-footer--error {
   --atomix-footer-bg: var(--atomix-error-bg-subtle);
   --atomix-footer-border-color: var(--atomix-error-border-subtle);
-  --atomix-footer-color: var(--atomix-error-text);
+  --atomix-footer-color: var(--atomix-error-text-emphasis);
 }
 .c-footer--error .c-footer__brand-name h3,
 .c-footer--error .c-footer__section-title {
@@ -6258,10 +6007,10 @@ a, a:hover {
 }
 .c-footer--error .c-footer__brand-description,
 .c-footer--error .c-footer__copyright {
-  color: var(--atomix-error-text-muted);
+  color: var(--atomix-gray-6);
 }
 .c-footer--error .c-footer__link {
-  color: var(--atomix-error-text);
+  color: var(--atomix-error-text-emphasis);
 }
 .c-footer--error .c-footer__link:hover, .c-footer--error .c-footer__link:focus {
   color: var(--atomix-error);
@@ -6270,8 +6019,8 @@ a, a:hover {
   background-color: var(--atomix-error);
 }
 .c-footer--error .c-footer__newsletter {
-  background: linear-gradient(135deg, var(--atomix-error-bg), rgba(var(--atomix-error-bg-rgb), 0.8));
-  border-color: var(--atomix-error-border);
+  background: linear-gradient(135deg, var(--atomix-error-bg-subtle), rgba(var(--atomix-error-bg-subtle), 0.8));
+  border-color: var(--atomix-error-border-subtle);
 }
 .c-footer--error .c-footer__newsletter::before {
   background: linear-gradient(90deg, transparent, var(--atomix-error), transparent);
@@ -6279,7 +6028,7 @@ a, a:hover {
 .c-footer--success {
   --atomix-footer-bg: var(--atomix-success-bg-subtle);
   --atomix-footer-border-color: var(--atomix-success-border-subtle);
-  --atomix-footer-color: var(--atomix-success-text);
+  --atomix-footer-color: var(--atomix-success-text-emphasis);
 }
 .c-footer--success .c-footer__brand-name h3,
 .c-footer--success .c-footer__section-title {
@@ -6287,10 +6036,10 @@ a, a:hover {
 }
 .c-footer--success .c-footer__brand-description,
 .c-footer--success .c-footer__copyright {
-  color: var(--atomix-success-text-muted);
+  color: var(--atomix-gray-6);
 }
 .c-footer--success .c-footer__link {
-  color: var(--atomix-success-text);
+  color: var(--atomix-success-text-emphasis);
 }
 .c-footer--success .c-footer__link:hover, .c-footer--success .c-footer__link:focus {
   color: var(--atomix-success);
@@ -6299,8 +6048,8 @@ a, a:hover {
   background-color: var(--atomix-success);
 }
 .c-footer--success .c-footer__newsletter {
-  background: linear-gradient(135deg, var(--atomix-success-bg), rgba(var(--atomix-success-bg-rgb), 0.8));
-  border-color: var(--atomix-success-border);
+  background: linear-gradient(135deg, var(--atomix-success-bg-subtle), rgba(var(--atomix-success-bg-subtle), 0.8));
+  border-color: var(--atomix-success-border-subtle);
 }
 .c-footer--success .c-footer__newsletter::before {
   background: linear-gradient(90deg, transparent, var(--atomix-success), transparent);
@@ -6308,7 +6057,7 @@ a, a:hover {
 .c-footer--warning {
   --atomix-footer-bg: var(--atomix-warning-bg-subtle);
   --atomix-footer-border-color: var(--atomix-warning-border-subtle);
-  --atomix-footer-color: var(--atomix-warning-text);
+  --atomix-footer-color: var(--atomix-warning-text-emphasis);
 }
 .c-footer--warning .c-footer__brand-name h3,
 .c-footer--warning .c-footer__section-title {
@@ -6316,10 +6065,10 @@ a, a:hover {
 }
 .c-footer--warning .c-footer__brand-description,
 .c-footer--warning .c-footer__copyright {
-  color: var(--atomix-warning-text-muted);
+  color: var(--atomix-gray-6);
 }
 .c-footer--warning .c-footer__link {
-  color: var(--atomix-warning-text);
+  color: var(--atomix-warning-text-emphasis);
 }
 .c-footer--warning .c-footer__link:hover, .c-footer--warning .c-footer__link:focus {
   color: var(--atomix-warning);
@@ -6328,8 +6077,8 @@ a, a:hover {
   background-color: var(--atomix-warning);
 }
 .c-footer--warning .c-footer__newsletter {
-  background: linear-gradient(135deg, var(--atomix-warning-bg), rgba(var(--atomix-warning-bg-rgb), 0.8));
-  border-color: var(--atomix-warning-border);
+  background: linear-gradient(135deg, var(--atomix-warning-bg-subtle), rgba(var(--atomix-warning-bg-subtle), 0.8));
+  border-color: var(--atomix-warning-border-subtle);
 }
 .c-footer--warning .c-footer__newsletter::before {
   background: linear-gradient(90deg, transparent, var(--atomix-warning), transparent);
@@ -6337,7 +6086,7 @@ a, a:hover {
 .c-footer--info {
   --atomix-footer-bg: var(--atomix-info-bg-subtle);
   --atomix-footer-border-color: var(--atomix-info-border-subtle);
-  --atomix-footer-color: var(--atomix-info-text);
+  --atomix-footer-color: var(--atomix-info-text-emphasis);
 }
 .c-footer--info .c-footer__brand-name h3,
 .c-footer--info .c-footer__section-title {
@@ -6345,10 +6094,10 @@ a, a:hover {
 }
 .c-footer--info .c-footer__brand-description,
 .c-footer--info .c-footer__copyright {
-  color: var(--atomix-info-text-muted);
+  color: var(--atomix-gray-6);
 }
 .c-footer--info .c-footer__link {
-  color: var(--atomix-info-text);
+  color: var(--atomix-info-text-emphasis);
 }
 .c-footer--info .c-footer__link:hover, .c-footer--info .c-footer__link:focus {
   color: var(--atomix-info);
@@ -6357,8 +6106,8 @@ a, a:hover {
   background-color: var(--atomix-info);
 }
 .c-footer--info .c-footer__newsletter {
-  background: linear-gradient(135deg, var(--atomix-info-bg), rgba(var(--atomix-info-bg-rgb), 0.8));
-  border-color: var(--atomix-info-border);
+  background: linear-gradient(135deg, var(--atomix-info-bg-subtle), rgba(var(--atomix-info-bg-subtle), 0.8));
+  border-color: var(--atomix-info-border-subtle);
 }
 .c-footer--info .c-footer__newsletter::before {
   background: linear-gradient(90deg, transparent, var(--atomix-info), transparent);
@@ -6366,7 +6115,7 @@ a, a:hover {
 .c-footer--light {
   --atomix-footer-bg: var(--atomix-light-bg-subtle);
   --atomix-footer-border-color: var(--atomix-light-border-subtle);
-  --atomix-footer-color: var(--atomix-light-text);
+  --atomix-footer-color: var(--atomix-light-text-emphasis);
 }
 .c-footer--light .c-footer__brand-name h3,
 .c-footer--light .c-footer__section-title {
@@ -6374,10 +6123,10 @@ a, a:hover {
 }
 .c-footer--light .c-footer__brand-description,
 .c-footer--light .c-footer__copyright {
-  color: var(--atomix-light-text-muted);
+  color: var(--atomix-gray-6);
 }
 .c-footer--light .c-footer__link {
-  color: var(--atomix-light-text);
+  color: var(--atomix-light-text-emphasis);
 }
 .c-footer--light .c-footer__link:hover, .c-footer--light .c-footer__link:focus {
   color: var(--atomix-light);
@@ -6386,8 +6135,8 @@ a, a:hover {
   background-color: var(--atomix-light);
 }
 .c-footer--light .c-footer__newsletter {
-  background: linear-gradient(135deg, var(--atomix-light-bg), rgba(var(--atomix-light-bg-rgb), 0.8));
-  border-color: var(--atomix-light-border);
+  background: linear-gradient(135deg, var(--atomix-light-bg-subtle), rgba(var(--atomix-light-bg-subtle), 0.8));
+  border-color: var(--atomix-light-border-subtle);
 }
 .c-footer--light .c-footer__newsletter::before {
   background: linear-gradient(90deg, transparent, var(--atomix-light), transparent);
@@ -6395,7 +6144,7 @@ a, a:hover {
 .c-footer--dark {
   --atomix-footer-bg: var(--atomix-dark-bg-subtle);
   --atomix-footer-border-color: var(--atomix-dark-border-subtle);
-  --atomix-footer-color: var(--atomix-dark-text);
+  --atomix-footer-color: var(--atomix-dark-text-emphasis);
 }
 .c-footer--dark .c-footer__brand-name h3,
 .c-footer--dark .c-footer__section-title {
@@ -6403,10 +6152,10 @@ a, a:hover {
 }
 .c-footer--dark .c-footer__brand-description,
 .c-footer--dark .c-footer__copyright {
-  color: var(--atomix-dark-text-muted);
+  color: var(--atomix-gray-6);
 }
 .c-footer--dark .c-footer__link {
-  color: var(--atomix-dark-text);
+  color: var(--atomix-dark-text-emphasis);
 }
 .c-footer--dark .c-footer__link:hover, .c-footer--dark .c-footer__link:focus {
   color: var(--atomix-dark);
@@ -6415,8 +6164,8 @@ a, a:hover {
   background-color: var(--atomix-dark);
 }
 .c-footer--dark .c-footer__newsletter {
-  background: linear-gradient(135deg, var(--atomix-dark-bg), rgba(var(--atomix-dark-bg-rgb), 0.8));
-  border-color: var(--atomix-dark-border);
+  background: linear-gradient(135deg, var(--atomix-dark-bg-subtle), rgba(var(--atomix-dark-bg-subtle), 0.8));
+  border-color: var(--atomix-dark-border-subtle);
 }
 .c-footer--dark .c-footer__newsletter::before {
   background: linear-gradient(90deg, transparent, var(--atomix-dark), transparent);
@@ -6424,34 +6173,12 @@ a, a:hover {
 .c-footer--sticky {
   position: sticky;
   bottom: 0;
-  z-index: 10;
+  z-index: 100;
   box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
   -webkit-backdrop-filter: blur(10px);
           backdrop-filter: blur(10px);
   background-color: rgba(var(--atomix-footer-bg-rgb), 0.95);
 }
-@media (prefers-color-scheme: dark) {
-  .c-footer {
-    --atomix-footer-bg: var(--atomix-surface-dark);
-    --atomix-footer-color: var(--atomix-text-dark);
-    --atomix-footer-border-color: var(--atomix-border-dark);
-  }
-}
-.dark-mode .c-footer {
-  --atomix-footer-bg: var(--atomix-surface-dark);
-  --atomix-footer-color: var(--atomix-text-dark);
-  --atomix-footer-border-color: var(--atomix-border-dark);
-}
-.dark-mode .c-footer .c-footer__newsletter {
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
-  border-color: rgba(255, 255, 255, 0.1);
-}
-.dark-mode .c-footer .c-footer__social-link {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-.dark-mode .c-footer .c-footer__social-link:hover {
-  background-color: rgba(255, 255, 255, 0.2);
-}
 @media (prefers-reduced-motion: reduce) {
   .c-footer *,
   .c-footer *::before,
@@ -6708,7 +6435,7 @@ a, a:hover {
   transition-delay: 0s;
 }
 .c-input:focus, .c-input:hover {
-  --atomix-input-border-color: var(--atomix-secondary-border-subtle);
+  --atomix-input-border-color: var(--atomix-primary-border-subtle);
 }
 .c-input ::-webkit-input-placeholder {
   color: var(--atomix-input-placeholder-color);
@@ -6776,10 +6503,10 @@ a, a:hover {
 .c-input--glass {
   background-color: color-mix(in srgb, var(--atomix-input-bg) 50%, transparent);
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
+  border-color: color-mix(in srgb, var(--atomix-input-border-color) 50%, transparent);
 }
 .c-input--glass:focus, .c-input--glass:hover {
-  background-color: color-mix(in srgb, var(--atomix-input-bg) 50%, transparent);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.2) inset, 0 0 0 2px rgba(var(--atomix-primary-rgb, 122, 255, 215), 0.3);
+  background-color: color-mix(in srgb, var(--atomix-input-bg) 90%, transparent);
 }
 .c-input--glass.c-input--textarea {
   resize: vertical;
@@ -6854,6 +6581,7 @@ a, a:hover {
   --atomix-list-item-dash-width: 0.75rem;
   --atomix-list-item-dash-height: 0.125rem;
   padding-left: var(--atomix-list-padding-left);
+  list-style: none;
 }
 .c-list__item {
   color: var(--atomix-list-color);
@@ -7507,6 +7235,8 @@ a, a:hover {
   width: 100%;
   height: 100%;
   display: none;
+}
+.c-modal:not(.c-modal--glass) {
   z-index: 1040;
 }
 .c-modal__backdrop {
@@ -10415,6 +10145,9 @@ a, a:hover {
   --atomix-upload-disabled-opacity: 0.5;
   --atomix-upload-loader-control-icon-size: 1.25rem;
   --atomix-upload-loader-contorl-color: var(--atomix-body-color);
+  --atomix-upload-helper-text-opacity: 0.7;
+  --atomix-upload-text-opacity: 0.8;
+  --atomix-upload-text-margin-bottom: 1rem;
   width: 100%;
   max-width: var(--atomix-upload-width);
   padding: var(--atomix-upload-padding-y) var(--atomix-upload-padding-x);
@@ -10435,24 +10168,47 @@ a, a:hover {
   padding: var(--atomix-upload-inner-padding-y) var(--atomix-upload-inner-padding-x);
   border-radius: var(--atomix-upload-border-radius);
   border: var(--atomix-upload-border-width) dashed var(--atomix-upload-border-color);
+  cursor: pointer;
+  transition: all 0.3s ease-in-out;
+}
+.c-upload__inner:hover {
+  border-color: var(--atomix-primary-6);
+  background-color: var(--atomix-primary-bg-subtle);
+  transform: translateY(-2px);
+  box-shadow: var(--atomix-box-shadow);
 }
 .c-upload__icon {
   font-size: var(--atomix-upload-icon-size);
-  padding: var(--atomix-upload-icon-padding);
-  background-color: var(--atomix-upload-icon-bg);
-  border-radius: 50rem;
+  padding: 12;
+  color: var(--atomix-primary-6);
+  background-color: var(--atomix-primary-bg-subtle);
+  border-radius: var(--atomix-border-radius-pill);
+  margin-bottom: 12;
+  transition: all 0.3s ease-in-out;
+}
+.c-upload__icon:hover {
+  color: var(--atomix-primary-7);
+  background-color: var(--atomix-primary-border-subtle);
+  transform: scale(1.05);
 }
 .c-upload__title {
   color: var(--atomix-upload-title-color);
   font-size: var(--atomix-upload-title-font-size);
   font-weight: var(--atomix-upload-title-font-weight);
   margin-top: var(--atomix-upload-title-margin-top);
+  margin-bottom: var(--atomix-upload-title-margin-bottom);
+  text-align: center;
+  line-height: 1.4;
 }
 .c-upload__text {
   color: var(--atomix-upload-text-color);
   font-size: var(--atomix-upload-text-font-size);
   font-weight: var(--atomix-upload-text-font-weight);
   margin-top: var(--atomix-upload-text-margin-top);
+  margin-bottom: var(--atomix-upload-text-margin-bottom);
+  text-align: center;
+  line-height: 1.5;
+  opacity: var(--atomix-upload-text-opacity);
 }
 .c-upload__btn {
   margin-top: var(--atomix-upload-btn-margin-top);
@@ -10462,6 +10218,9 @@ a, a:hover {
   font-size: var(--atomix-upload-helper-text-font-size);
   font-weight: var(--atomix-upload-helper-text-font-weight);
   margin-top: var(--atomix-upload-helper-text-margin-top);
+  text-align: center;
+  opacity: var(--atomix-upload-helper-text-opacity);
+  line-height: 1.4;
 }
 .c-upload__row {
   width: 100%;
@@ -10480,6 +10239,7 @@ a, a:hover {
 .c-upload__loader {
   --upload-loader-percentage: 0;
   display: flex;
+  align-items: center;
   justify-content: space-between;
   position: relative;
   width: 100%;
@@ -10488,6 +10248,8 @@ a, a:hover {
   border: var(--atomix-upload-loader-border-width) solid var(--atomix-upload-loader-border-color);
   border-radius: var(--atomix-upload-loader-border-radius);
   margin-top: var(--atomix-upload-loader-margin-top);
+  background-color: var(--atomix-body-bg);
+  box-shadow: var(--atomix-box-shadow-sm);
   overflow: hidden;
 }
 .c-upload__loader-title {
@@ -10512,6 +10274,20 @@ a, a:hover {
 .c-upload__loader-close {
   color: var(--atomix-upload-loader-contorl-color);
   font-size: var(--atomix-upload-loader-control-icon-size);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4;
+  border-radius: var(--atomix-border-radius-sm);
+  transition: all 0.2s ease-in-out;
+}
+.c-upload__loader-close:hover {
+  background-color: var(--atomix-danger-bg-subtle);
+  color: var(--atomix-danger-text-emphasis);
+}
+.c-upload__loader-close:focus {
+  outline: 2px solid var(--atomix-focus-border-color);
+  outline-offset: 2px;
 }
 .c-upload__loader-bar {
   width: 22px;
@@ -10576,6 +10352,112 @@ a, a:hover {
 .c-upload--disabled .c-upload__btn {
   pointer-events: none;
 }
+.c-upload--disabled .c-upload__inner {
+  cursor: not-allowed;
+}
+.c-upload--disabled .c-upload__inner:hover {
+  transform: none;
+  box-shadow: none;
+  border-color: var(--atomix-upload-border-color);
+  background-color: transparent;
+}
+.c-upload--dragging .c-upload__inner {
+  border-color: var(--atomix-primary-6);
+  background-color: var(--atomix-primary-bg-subtle);
+  transform: scale(1.02);
+  box-shadow: var(--atomix-box-shadow-lg);
+}
+.c-upload--dragging .c-upload__icon {
+  color: var(--atomix-primary-7);
+  background-color: var(--atomix-primary-border-subtle);
+  transform: scale(1.1);
+}
+.c-upload--dragging .c-upload__title {
+  color: var(--atomix-primary-6);
+}
+.c-upload--loading .c-upload__loader-bar circle:nth-child(2) {
+  stroke: var(--atomix-primary-6);
+}
+.c-upload--success .c-upload__loader-bar circle:nth-child(2) {
+  stroke: var(--atomix-success-6);
+}
+.c-upload--error .c-upload__loader-bar circle:nth-child(2) {
+  stroke: var(--atomix-error-6);
+}
+.c-upload__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+@media (max-width: 768px) {
+  .c-upload {
+    max-width: 100%;
+  }
+  .c-upload__inner {
+    padding: 16 12;
+  }
+  .c-upload__icon {
+    font-size: 28;
+    padding: 8;
+    margin-bottom: 8;
+  }
+  .c-upload__title {
+    font-size: var(--atomix-font-size-md);
+  }
+  .c-upload__text {
+    font-size: var(--atomix-font-size-xs);
+  }
+  .c-upload__loader {
+    padding: 8 12;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8;
+  }
+  .c-upload__loader-control {
+    align-self: flex-end;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .c-upload__inner {
+    transition: none;
+  }
+  .c-upload__inner:hover {
+    transform: none;
+  }
+  .c-upload__icon {
+    transition: none;
+  }
+  .c-upload__icon:hover {
+    transform: none;
+  }
+  .c-upload--dragging .c-upload__inner {
+    transform: none;
+  }
+  .c-upload--dragging .c-upload__icon {
+    transform: none;
+  }
+}
+@media (prefers-contrast: high) {
+  .c-upload__inner {
+    border-width: 3px;
+  }
+  .c-upload--dragging .c-upload__inner {
+    border-width: 4px;
+  }
+  .c-upload__loader {
+    border-width: 2px;
+  }
+}
+.c-upload__inner:focus-visible {
+  outline: 2px solid var(--atomix-focus-border-color);
+  outline-offset: 2px;
+}
 .c-video-player {
   --atomix--video-player-bg: #000;
   --atomix--video-player-border-radius: 8px;