@salesmind-ai/design-system 0.6.0 → 0.7.0

package/dist/styles/styles.css

@@ -2,7 +2,7 @@
 :root {
   --color-accent: rgb(var(--accent-rgb));
   --color-accent-secondary: rgb(var(--accent-secondary-rgb));
-  --void-grid-size: 80px;
+  --void-grid-size: var(--grid-cell-web);
   --void-grid-grain-opacity: 0.025;
   --void-float-distance: 24px;
   --density-multiplier: 1;
@@ -30,6 +30,13 @@
     Monaco,
     "Cascadia Code",
     monospace;
+  --font-anton-source: "Anton";
+  --font-anton-fallback:
+    -apple-system,
+    BlinkMacSystemFont,
+    "Helvetica Neue",
+    sans-serif;
+  --font-family-display: var(--font-anton-source), var(--font-anton-fallback);
   --font-size-2xs: 0.625rem;
   --font-size-xs: 0.75rem;
   --font-size-sm: 0.875rem;
@@ -121,6 +128,58 @@
   --illus-layout-gap: 80px;
   --illus-layout-gap-sm: 48px;
   --illus-layout-padding: 24px;
+  --embed-min-height-mobile: 900px;
+  --embed-min-height-tablet: 860px;
+  --embed-min-height-desktop: 830px;
+  --aurora-pink-raw: oklch(0.65 0.25 5);
+  --aurora-pink-low: oklch(0.65 0.175 5);
+  --aurora-pink-high: oklch(0.65 0.30 5);
+  --aurora-gold-raw: oklch(0.78 0.18 85);
+  --aurora-gold-low: oklch(0.78 0.126 85);
+  --aurora-gold-high: oklch(0.78 0.216 85);
+  --aurora-plum-raw: oklch(0.45 0.22 320);
+  --aurora-plum-low: oklch(0.45 0.154 320);
+  --aurora-plum-high: oklch(0.45 0.264 320);
+  --aurora-primary: var(--aurora-pink-raw);
+  --aurora-secondary: var(--aurora-gold-raw);
+  --aurora-tertiary: var(--aurora-plum-raw);
+  --vignette-radial-stops:
+    transparent 0%,
+    transparent 50%,
+    rgba(0,0,0,0.6) 100%;
+  --vignette-gradient: radial-gradient(ellipse at center, var(--vignette-radial-stops));
+  --vignette-light:
+    radial-gradient(
+      ellipse at center,
+      transparent 0%,
+      transparent 50%,
+      rgba(0,0,0,0.3) 100%);
+  --vignette-base:
+    radial-gradient(
+      ellipse at center,
+      transparent 0%,
+      transparent 50%,
+      rgba(0,0,0,0.6) 100%);
+  --vignette-heavy:
+    radial-gradient(
+      ellipse at center,
+      transparent 0%,
+      transparent 50%,
+      rgba(0,0,0,0.85) 100%);
+  --grid-cell-web: 64px;
+  --grid-cell-social-1200: 120px;
+  --grid-cell-services-1000: 120px;
+  --grid-line-color: rgba(255,255,255,0.04);
+  --grid-overlay-mask:
+    linear-gradient(
+      to bottom,
+      transparent 0%,
+      rgba(0,0,0,0.5) 8%,
+      rgba(0,0,0,0.5) 92%,
+      transparent 100%);
+  --glass-1: var(--glass-base);
+  --glass-2: var(--glass-elevated);
+  --glass-3: var(--glass-heavy);
 }
 :root,
 :root[data-theme=dark] {
@@ -137,6 +196,8 @@
   --glass-base: rgba(255, 255, 255, 0.06);
   --glass-base-hover: rgba(255, 255, 255, 0.09);
   --glass-base-active: rgba(255, 255, 255, 0.12);
+  --glass-elevated: rgba(255, 255, 255, 0.10);
+  --glass-heavy: rgba(255, 255, 255, 0.16);
   --glass-blur: 40px;
   --glass-saturate: 160%;
   --glass-brightness: 90%;
@@ -248,6 +309,8 @@
   --glass-base: rgba(255, 255, 255, 0.08);
   --glass-base-hover: rgba(255, 255, 255, 0.12);
   --glass-base-active: rgba(255, 255, 255, 0.16);
+  --glass-elevated: rgba(255, 255, 255, 0.12);
+  --glass-heavy: rgba(255, 255, 255, 0.20);
   --glass-backdrop: blur(40px) saturate(100%) brightness(70%);
   --glass-backdrop-light: blur(20px) saturate(100%) brightness(80%);
   --glass-backdrop-heavy: blur(60px) saturate(100%) brightness(60%);
@@ -305,6 +368,8 @@
   --glass-base: rgba(255, 255, 255, 0.65);
   --glass-base-hover: rgba(255, 255, 255, 0.75);
   --glass-base-active: rgba(255, 255, 255, 0.85);
+  --glass-elevated: rgba(255, 255, 255, 0.75);
+  --glass-heavy: rgba(255, 255, 255, 0.85);
   --glass-blur: 24px;
   --glass-saturate: 180%;
   --glass-brightness: 110%;
@@ -416,6 +481,8 @@
   --glass-base: rgba(255, 255, 255, 0.9);
   --glass-base-hover: rgba(255, 255, 255, 0.95);
   --glass-base-active: rgba(255, 255, 255, 1);
+  --glass-elevated: rgba(255, 255, 255, 0.90);
+  --glass-heavy: rgba(255, 255, 255, 1);
   --glass-blur: 16px;
   --glass-saturate: 100%;
   --glass-brightness: 100%;
@@ -751,6 +818,15 @@ a:hover {
   scrollbar-width: thin;
   scrollbar-color: var(--surface-alpha-2) transparent;
 }
+:root {
+  --glass-white-95: rgba(255, 255, 255, 0.95);
+  --glass-white-98: rgba(255, 255, 255, 0.98);
+  --glass-white-border-low: rgba(255, 255, 255, 0.16);
+  --glass-white-border-mid: rgba(255, 255, 255, 0.22);
+  --glass-white-alpha-10: rgba(255, 255, 255, 0.10);
+  --glass-white-alpha-20: rgba(255, 255, 255, 0.20);
+  --glass-white-alpha-30: rgba(255, 255, 255, 0.30);
+}
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,
@@ -985,6 +1061,112 @@ a:hover {
     background: var(--fallback-surface);
   }
 }
+@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
+  .glass--tier-1 {
+    background: var(--glass-1);
+    backdrop-filter: blur(20px) saturate(160%);
+    -webkit-backdrop-filter: blur(20px) saturate(160%);
+  }
+  .glass--tier-2 {
+    background: var(--glass-2);
+    backdrop-filter: blur(28px) saturate(170%);
+    -webkit-backdrop-filter: blur(28px) saturate(170%);
+  }
+  .glass--tier-3 {
+    background: var(--glass-3);
+    backdrop-filter: blur(36px) saturate(180%);
+    -webkit-backdrop-filter: blur(36px) saturate(180%);
+  }
+  @supports (backdrop-filter: blur(40px)) {
+    @media (prefers-color-scheme: dark) {
+      .glass--tier-1.glass--enhanced {
+        backdrop-filter: blur(40px) saturate(180%);
+        -webkit-backdrop-filter: blur(40px) saturate(180%);
+      }
+      .glass--tier-2.glass--enhanced {
+        backdrop-filter: blur(48px) saturate(190%);
+        -webkit-backdrop-filter: blur(48px) saturate(190%);
+      }
+      .glass--tier-3.glass--enhanced {
+        backdrop-filter: blur(56px) saturate(200%);
+        -webkit-backdrop-filter: blur(56px) saturate(200%);
+      }
+    }
+  }
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .glass--tier-1,
+  .glass--tier-2,
+  .glass--tier-3 {
+    background: rgba(20, 20, 24, 0.92);
+  }
+}
+@media (prefers-reduced-motion: reduce), (prefers-reduced-transparency: reduce) {
+  .glass--tier-1,
+  .glass--tier-2,
+  .glass--tier-3 {
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+    background: rgba(20, 20, 24, 0.95);
+  }
+}
+
+/* src/styles/brand-gradients.css */
+.ds-grad--aurora-headline {
+  background-image:
+    linear-gradient(
+      135deg,
+      var(--aurora-primary),
+      var(--aurora-secondary));
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+}
+.ds-grad--brand-pink-glow {
+  background-image:
+    linear-gradient(
+      135deg,
+      var(--brand-pink),
+      var(--brand-pink-glow));
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+}
+.ds-grad--plum-deep {
+  background-image:
+    linear-gradient(
+      135deg,
+      var(--aurora-plum-raw),
+      var(--aurora-plum-low));
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+}
+.ds-grad--pipeline-flow {
+  background-image:
+    linear-gradient(
+      135deg,
+      var(--aurora-primary) 0%,
+      var(--aurora-secondary) 50%,
+      var(--aurora-tertiary) 100%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+}
+@media (forced-colors: active) {
+  .ds-grad--aurora-headline,
+  .ds-grad--brand-pink-glow,
+  .ds-grad--plum-deep,
+  .ds-grad--pipeline-flow {
+    color: CanvasText;
+    background: none;
+    -webkit-text-fill-color: CanvasText;
+  }
+}
 
 /* src/components/VoidBackground/VoidBackground.css */
 .void {
@@ -1053,7 +1235,7 @@ a:hover {
       to bottom,
       var(--void-grid-color) 1px,
       transparent 1px);
-  background-size: var(--void-grid-size) var(--void-grid-size);
+  background-size: var(--grid-cell-web) var(--grid-cell-web);
   mask-image:
     radial-gradient(
       ellipse 70% 60% at 50% 40%,
@@ -1412,197 +1594,133 @@ a:hover {
       var(--glass-highlight-light) 0%,
       rgba(var(--status-error-rgb, 239, 68, 68), 0.08) 100%);
 }
-.ds-button--loading {
-  position: relative;
-  cursor: not-allowed;
-  opacity: 0.8;
-}
-.ds-button__spinner {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  animation: ds-button-spin 1s linear infinite;
-}
-.ds-button__content {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: inherit;
-  visibility: visible;
-}
-.ds-button__content--hidden {
-  visibility: hidden;
-}
-@keyframes ds-button-spin {
-  from {
-    transform: translate(-50%, -50%) rotate(0deg);
-  }
-  to {
-    transform: translate(-50%, -50%) rotate(360deg);
-  }
-}
-
-/* src/components/TextField/TextField.css */
-.ds-textfield {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-}
-.ds-textfield__label {
-  font-family: var(--font-family);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-  color: var(--text-secondary);
-  transition: color var(--transition-base);
-}
-.ds-textfield:focus-within .ds-textfield__label {
-  color: var(--text-primary);
-}
-.ds-textfield__input {
-  position: relative;
-  font-family: var(--font-family);
-  font-size: var(--font-size-base);
-  padding: var(--space-3) var(--space-4);
-  border: none;
-  border-radius: var(--radius-button);
+.ds-button--aurora-primary {
+  background:
+    linear-gradient(
+      135deg,
+      var(--aurora-pink-raw),
+      var(--aurora-gold-raw));
   color: var(--text-primary);
-  outline: none;
-  width: 100%;
-  box-sizing: border-box;
-  background: var(--glass-base-active);
-  backdrop-filter: blur(20px) saturate(140%);
-  -webkit-backdrop-filter: blur(20px) saturate(140%);
-  box-shadow: var(--shadow-md), var(--shadow-inset-border-subtle);
-  transition: background var(--transition-glass), box-shadow var(--transition-glass);
+  box-shadow:
+    var(--shadow-interactive-rest),
+    var(--glass-shadow-inner),
+    inset 0 0 0 1px var(--glass-white-border-low),
+    0 0 30px rgba(var(--brand-pink-rgb, 221, 56, 84), 0.25);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
 }
-.ds-textfield__input::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  padding: var(--space-px);
+.ds-button--aurora-primary::before {
   background:
     linear-gradient(
       180deg,
-      var(--rim-light-top) 0%,
-      var(--rim-light-bottom) 100%);
-  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  mask-composite: exclude;
-  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  -webkit-mask-composite: xor;
-  pointer-events: none;
+      var(--glass-highlight-strong) 0%,
+      rgba(var(--brand-pink-rgb, 221, 56, 84), 0.2) 100%);
 }
-.ds-textfield__input-wrapper {
-  position: relative;
+.ds-button--aurora-primary:hover:not(:disabled) {
+  background:
+    linear-gradient(
+      135deg,
+      var(--aurora-pink-high),
+      var(--aurora-gold-high));
+  box-shadow:
+    var(--shadow-interactive-hover),
+    var(--glass-shadow-inner),
+    inset 0 0 0 1px var(--glass-white-border-mid),
+    0 0 40px rgba(var(--brand-pink-rgb, 221, 56, 84), 0.35);
+  transform: translateY(-1px);
 }
-.ds-textfield__input-wrapper::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: var(--radius-button);
-  padding: var(--space-px);
+.ds-button--aurora-primary:hover:not(:disabled)::before {
   background:
     linear-gradient(
       180deg,
-      var(--rim-light-top) 0%,
-      var(--rim-light-bottom) 100%);
-  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  mask-composite: exclude;
-  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  -webkit-mask-composite: xor;
-  pointer-events: none;
-  transition: background var(--transition-glass);
-}
-.ds-textfield__input::placeholder {
-  color: var(--text-tertiary);
+      var(--glass-highlight-bright) 0%,
+      rgba(var(--brand-pink-rgb, 221, 56, 84), 0.25) 100%);
 }
-.ds-textfield__input:hover:not(:disabled):not(:focus) {
-  background: var(--glass-base-hover);
+.ds-button--aurora-primary:active:not(:disabled) {
+  transform: translateY(0);
+  box-shadow:
+    var(--shadow-interactive-active),
+    var(--glass-shadow-inner),
+    inset 0 0 0 1px var(--glass-white-border-low),
+    0 0 20px rgba(var(--brand-pink-rgb, 221, 56, 84), 0.2);
 }
-.ds-textfield__input-wrapper:hover:not(:has(:disabled)):not(:has(:focus))::before {
+.ds-button--aurora-secondary {
   background:
     linear-gradient(
-      180deg,
-      var(--rim-light-hover-top) 0%,
-      var(--rim-light-hover-bottom) 100%);
-}
-.ds-textfield__input:focus {
-  background: var(--glass-base-hover);
+      135deg,
+      var(--aurora-plum-raw),
+      var(--aurora-pink-raw));
+  color: var(--text-primary);
   box-shadow:
-    var(--shadow-lg),
+    var(--shadow-interactive-rest),
     var(--glass-shadow-inner),
-    0 0 0 2px rgba(var(--brand-pink-rgb), 0.3);
+    inset 0 0 0 1px var(--glass-white-border-low),
+    0 0 24px rgba(var(--brand-pink-rgb, 221, 56, 84), 0.15);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
 }
-.ds-textfield__input-wrapper:has(:focus)::before {
+.ds-button--aurora-secondary::before {
   background:
     linear-gradient(
       180deg,
-      rgba(var(--brand-pink-rgb), 0.4) 0%,
-      rgba(var(--brand-pink-rgb), 0.1) 100%);
-}
-.ds-textfield__input:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-.ds-textfield__input--adorned {
-  padding-right: var(--space-12);
-}
-.ds-textfield__adornment {
-  position: absolute;
-  right: var(--space-2);
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 2;
+      var(--glass-highlight-medium) 0%,
+      rgba(var(--brand-pink-rgb, 221, 56, 84), 0.15) 100%);
 }
-.ds-textfield__input--error {
+.ds-button--aurora-secondary:hover:not(:disabled) {
+  background:
+    linear-gradient(
+      135deg,
+      var(--aurora-plum-high),
+      var(--aurora-pink-high));
   box-shadow:
-    var(--shadow-md),
-    var(--shadow-inset-border-error),
-    0 0 0 1px rgba(var(--status-error-rgb), 0.5);
+    var(--shadow-interactive-hover),
+    var(--glass-shadow-inner),
+    inset 0 0 0 1px var(--glass-white-border-mid),
+    0 0 32px rgba(var(--brand-pink-rgb, 221, 56, 84), 0.25);
+  transform: translateY(-1px);
 }
-.ds-textfield__input-wrapper:has(.ds-textfield__input--error)::before {
+.ds-button--aurora-secondary:hover:not(:disabled)::before {
   background:
     linear-gradient(
       180deg,
-      rgba(var(--status-error-rgb), 0.4) 0%,
-      rgba(var(--status-error-rgb), 0.1) 100%);
+      var(--glass-highlight-strong) 0%,
+      rgba(var(--brand-pink-rgb, 221, 56, 84), 0.2) 100%);
 }
-.ds-textfield__input--error:focus {
+.ds-button--aurora-secondary:active:not(:disabled) {
+  transform: translateY(0);
   box-shadow:
-    var(--shadow-lg),
+    var(--shadow-interactive-active),
     var(--glass-shadow-inner),
-    0 0 0 2px rgba(var(--status-error-rgb), 0.4);
+    inset 0 0 0 1px var(--glass-white-border-low);
 }
-.ds-textfield__helper {
-  font-family: var(--font-family);
-  font-size: var(--font-size-xs);
-  color: var(--text-tertiary);
+.ds-button--loading {
+  position: relative;
+  cursor: not-allowed;
+  opacity: 0.8;
 }
-.ds-textfield__helper--error {
-  color: var(--status-error);
+.ds-button__spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  animation: ds-button-spin 1s linear infinite;
 }
-@media (prefers-contrast: more) {
-  .ds-textfield__input {
-    background: var(--hc-surface-input);
-    border: 1px solid var(--hc-border);
-  }
-  .ds-textfield__input-wrapper::before {
-    display: none;
-  }
-  .ds-textfield__input:focus {
-    border-color: var(--brand-pink);
-  }
-  .ds-textfield__input--error {
-    border-color: var(--status-error);
-  }
+.ds-button__content {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: inherit;
+  visibility: visible;
 }
-@supports not (backdrop-filter: blur(1px)) {
-  .ds-textfield__input {
-    background: var(--fallback-surface);
+.ds-button__content--hidden {
+  visibility: hidden;
+}
+@keyframes ds-button-spin {
+  from {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  to {
+    transform: translate(-50%, -50%) rotate(360deg);
   }
 }
 
@@ -1885,36 +2003,21 @@ a:hover {
   }
 }
 
-/* src/components/Dialog/Dialog.css */
-.ds-dialog__backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(var(--void-base-rgb), 0.8);
-  backdrop-filter: blur(8px) saturate(120%);
-  -webkit-backdrop-filter: blur(8px) saturate(120%);
-  animation: ds-backdrop-fade-in 0.25s ease-out;
-  z-index: var(--z-modal-backdrop);
-}
-.ds-dialog__content {
+/* src/components/Sidebar/Sidebar.css */
+.ds-sidebar {
   position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: calc(100vw - var(--float-distance) * 2);
-  max-width: 480px;
-  max-height: calc(100vh - var(--float-distance) * 2);
-  overflow-y: auto;
-  z-index: var(--z-modal);
-  outline: none;
+  top: var(--float-distance);
+  bottom: var(--float-distance);
+  width: var(--sidebar-width, 280px);
+  z-index: var(--z-glass-panel);
   background: var(--glass-base);
   backdrop-filter: var(--glass-backdrop);
   -webkit-backdrop-filter: var(--glass-backdrop);
   border-radius: var(--radius-panel);
-  padding: var(--space-8);
-  box-shadow: var(--shadow-xl), var(--glass-shadow-inner);
-  animation: ds-dialog-scale-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+  box-shadow: var(--glass-shadow-combined);
+  transition: transform var(--transition-slow), opacity var(--transition-slow);
 }
-.ds-dialog__content::before {
+.ds-sidebar::before {
   content: "";
   position: absolute;
   inset: 0;
@@ -1923,289 +2026,43 @@ a:hover {
   background:
     linear-gradient(
       180deg,
-      var(--rim-light-hover-top) 0%,
-      var(--rim-light-top) 100%);
+      var(--rim-light-top) 0%,
+      var(--rim-light-bottom) 100%);
   mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
   mask-composite: exclude;
   -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
   -webkit-mask-composite: xor;
   pointer-events: none;
 }
-.ds-dialog__header {
+.ds-sidebar--left {
+  left: var(--float-distance);
+}
+.ds-sidebar--right {
+  right: var(--float-distance);
+}
+.ds-sidebar--collapsed.ds-sidebar--left {
+  transform: translateX(calc(-100% - var(--float-distance)));
+}
+.ds-sidebar--collapsed.ds-sidebar--right {
+  transform: translateX(calc(100% + var(--float-distance)));
+}
+.ds-sidebar__content {
   display: flex;
   flex-direction: column;
-  gap: var(--space-2);
-  margin-bottom: var(--space-6);
+  height: 100%;
+  padding: var(--space-4);
+  overflow-y: auto;
+  overflow-x: hidden;
 }
-.ds-dialog__header .ds-dialog__title {
-  margin: 0;
+.ds-sidebar__content::-webkit-scrollbar {
+  width: 6px;
 }
-.ds-dialog__header .ds-dialog__description {
-  margin: 0;
+.ds-sidebar__content::-webkit-scrollbar-track {
+  background: transparent;
 }
-.ds-dialog__title {
-  margin: 0 0 var(--space-2);
-  font-family: var(--font-family);
-  font-size: var(--font-size-xl);
-  font-weight: var(--font-weight-semibold);
-  color: var(--text-primary);
-  line-height: var(--line-height-tight);
-}
-.ds-dialog__description {
-  margin: 0 0 var(--space-6);
-  font-family: var(--font-family);
-  font-size: var(--font-size-base);
-  color: var(--text-secondary);
-  line-height: var(--line-height-normal);
-}
-.ds-dialog__close {
-  position: absolute;
-  top: var(--space-4);
-  right: var(--space-4);
-  width: 2rem;
-  height: 2rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  cursor: pointer;
-  color: var(--text-secondary);
-  background: var(--glass-base);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border-radius: var(--radius-badge);
-  transition: background var(--transition-glass), color var(--transition-glass);
-}
-.ds-dialog__close:hover {
-  background: var(--glass-base-hover);
-  color: var(--text-primary);
-}
-.ds-dialog__close:focus-visible {
-  box-shadow: var(--focus-ring);
-  outline: none;
-}
-.ds-dialog__footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--space-3);
-  margin-top: var(--space-6);
-}
-@keyframes ds-backdrop-fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@keyframes ds-dialog-scale-in {
-  from {
-    opacity: 0;
-    transform: translate(-50%, -48%) scale(0.96);
-  }
-  to {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
-  }
-}
-.ds-dialog__backdrop[data-exiting] {
-  animation: ds-backdrop-fade-out 0.2s ease-in forwards;
-}
-.ds-dialog__content[data-exiting] {
-  animation: ds-dialog-scale-out 0.2s ease-in forwards;
-}
-@keyframes ds-backdrop-fade-out {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-@keyframes ds-dialog-scale-out {
-  from {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: translate(-50%, -48%) scale(0.96);
-  }
-}
-.ds-dialog__content--sm {
-  max-width: 360px;
-  padding: var(--space-6);
-}
-.ds-dialog__content--lg {
-  max-width: 640px;
-}
-.ds-dialog__content--xl {
-  max-width: 800px;
-}
-.ds-dialog__content--fullscreen {
-  max-width: calc(100vw - var(--float-distance) * 2);
-  max-height: calc(100vh - var(--float-distance) * 2);
-  width: calc(100vw - var(--float-distance) * 2);
-  height: calc(100vh - var(--float-distance) * 2);
-}
-@media (prefers-contrast: more) {
-  .ds-dialog__backdrop {
-    background: var(--overlay-backdrop-heavy);
-    backdrop-filter: none;
-  }
-  .ds-dialog__content {
-    background: var(--hc-surface);
-    border: 1px solid var(--hc-border);
-  }
-  .ds-dialog__content::before {
-    display: none;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .ds-dialog__backdrop,
-  .ds-dialog__content {
-    animation: none;
-  }
-}
-@supports not (backdrop-filter: blur(1px)) {
-  .ds-dialog__backdrop {
-    background: var(--fallback-backdrop);
-  }
-  .ds-dialog__content {
-    background: var(--fallback-surface);
-  }
-}
-
-/* src/components/Tooltip/Tooltip.css */
-.ds-tooltip__content {
-  position: relative;
-  font-family: var(--font-family);
-  font-size: var(--font-size-sm);
-  color: var(--text-primary);
-  padding: var(--space-2) var(--space-3);
-  border-radius: var(--radius-badge);
-  max-width: 280px;
-  z-index: var(--z-tooltip);
-  background: var(--glass-base-hover);
-  backdrop-filter: blur(24px) saturate(160%) brightness(90%);
-  -webkit-backdrop-filter: blur(24px) saturate(160%) brightness(90%);
-  box-shadow: var(--glass-shadow-outer), var(--glass-shadow-inner);
-  animation: ds-tooltip-fade-in 0.15s ease-out;
-}
-.ds-tooltip__content::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  padding: var(--space-px);
-  background:
-    linear-gradient(
-      180deg,
-      var(--rim-light-hover-top) 0%,
-      var(--rim-light-top) 100%);
-  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  mask-composite: exclude;
-  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  -webkit-mask-composite: xor;
-  pointer-events: none;
-}
-.ds-tooltip__arrow {
-  width: 12px;
-  height: 6px;
-  fill: var(--glass-base-hover);
-  filter: drop-shadow(var(--shadow-md));
-}
-@keyframes ds-tooltip-fade-in {
-  from {
-    opacity: 0;
-    transform: scale(0.96);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-@media (prefers-contrast: more) {
-  .ds-tooltip__content {
-    background: var(--hc-surface);
-    border: 1px solid var(--hc-border-strong);
-    backdrop-filter: none;
-  }
-  .ds-tooltip__content::before {
-    display: none;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .ds-tooltip__content {
-    animation: none;
-  }
-}
-@supports not (backdrop-filter: blur(1px)) {
-  .ds-tooltip__content {
-    background: var(--fallback-surface);
-  }
-}
-
-/* src/components/Sidebar/Sidebar.css */
-.ds-sidebar {
-  position: fixed;
-  top: var(--float-distance);
-  bottom: var(--float-distance);
-  width: var(--sidebar-width, 280px);
-  z-index: var(--z-glass-panel);
-  background: var(--glass-base);
-  backdrop-filter: var(--glass-backdrop);
-  -webkit-backdrop-filter: var(--glass-backdrop);
-  border-radius: var(--radius-panel);
-  box-shadow: var(--glass-shadow-combined);
-  transition: transform var(--transition-slow), opacity var(--transition-slow);
-}
-.ds-sidebar::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  padding: var(--space-px);
-  background:
-    linear-gradient(
-      180deg,
-      var(--rim-light-top) 0%,
-      var(--rim-light-bottom) 100%);
-  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  mask-composite: exclude;
-  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  -webkit-mask-composite: xor;
-  pointer-events: none;
-}
-.ds-sidebar--left {
-  left: var(--float-distance);
-}
-.ds-sidebar--right {
-  right: var(--float-distance);
-}
-.ds-sidebar--collapsed.ds-sidebar--left {
-  transform: translateX(calc(-100% - var(--float-distance)));
-}
-.ds-sidebar--collapsed.ds-sidebar--right {
-  transform: translateX(calc(100% + var(--float-distance)));
-}
-.ds-sidebar__content {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  padding: var(--space-4);
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-.ds-sidebar__content::-webkit-scrollbar {
-  width: 6px;
-}
-.ds-sidebar__content::-webkit-scrollbar-track {
-  background: transparent;
-}
-.ds-sidebar__content::-webkit-scrollbar-thumb {
-  background: var(--surface-alpha-2);
-  border-radius: var(--radius-pill);
+.ds-sidebar__content::-webkit-scrollbar-thumb {
+  background: var(--surface-alpha-2);
+  border-radius: var(--radius-pill);
 }
 .ds-sidebar__content::-webkit-scrollbar-thumb:hover {
   background: var(--surface-alpha-3);
@@ -2331,2629 +2188,439 @@ a:hover {
   }
 }
 
-/* src/components/FloatingTabBar/FloatingTabBar.css */
-.ds-floating-tab-bar {
-  position: fixed;
-  left: 50%;
-  transform: translateX(-50%);
+/* src/components/Shell/Shell.css */
+.ds-shell {
+  position: relative;
+  width: 100%;
+  min-height: 100%;
   display: flex;
-  align-items: center;
-  gap: var(--space-1);
-  padding: var(--space-2);
-  z-index: var(--z-ornament);
-  background: var(--glass-base-hover);
-  backdrop-filter: var(--glass-backdrop);
-  -webkit-backdrop-filter: var(--glass-backdrop);
-  border-radius: var(--radius-card);
-  box-shadow: var(--glass-shadow-elevated-combined);
 }
-.ds-floating-tab-bar::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  padding: var(--space-px);
-  background:
-    linear-gradient(
-      180deg,
-      var(--rim-light-hover-top) 0%,
-      var(--rim-light-top) 100%);
-  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  mask-composite: exclude;
-  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  -webkit-mask-composite: xor;
-  pointer-events: none;
+.ds-shell__content {
+  flex: 1;
+  width: 100%;
+  padding: var(--space-6);
+  padding-top: calc(var(--float-distance) + var(--space-4));
+  padding-bottom: calc(var(--float-distance) + var(--space-4));
+  box-sizing: border-box;
 }
-.ds-floating-tab-bar--top {
-  top: var(--float-distance);
+.ds-shell--left .ds-shell__content {
+  padding-left: calc(var(--sidebar-width, 280px) + var(--float-distance) * 2);
+  padding-right: var(--float-distance);
 }
-.ds-floating-tab-bar--bottom {
-  bottom: var(--float-distance);
+.ds-shell--right .ds-shell__content {
+  padding-right: calc(var(--sidebar-width, 280px) + var(--float-distance) * 2);
+  padding-left: var(--float-distance);
 }
-.ds-tab-item {
-  position: relative;
-  display: flex;
+.ds-shell--bottom {
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-1);
-  padding: var(--space-2) var(--space-4);
-  min-width: 64px;
-  border: none;
-  border-radius: var(--radius-button);
-  background: transparent;
-  color: var(--text-tertiary);
-  font-family: var(--font-family);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
-  cursor: pointer;
-  transition:
-    background var(--transition-glass),
-    color var(--transition-glass),
-    box-shadow var(--transition-glass),
-    transform var(--transition-glass);
 }
-.ds-tab-item::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  padding: var(--space-px);
-  background:
-    linear-gradient(
-      180deg,
-      var(--rim-light-top) 0%,
-      var(--rim-light-bottom) 100%);
-  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  mask-composite: exclude;
-  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  -webkit-mask-composite: xor;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity var(--transition-glass);
-}
-.ds-tab-item:hover {
-  background: var(--glass-base);
-  color: var(--text-secondary);
-}
-.ds-tab-item:hover::before {
-  opacity: 1;
-}
-.ds-tab-item:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-}
-.ds-tab-item--active {
-  background: rgba(var(--brand-pink-rgb), 0.2);
-  color: var(--text-primary);
-  box-shadow: var(--glass-shadow-inner), 0 0 24px rgba(var(--brand-pink-rgb), 0.15);
-}
-.ds-tab-item--active::before {
-  opacity: 1;
-  background:
-    linear-gradient(
-      180deg,
-      rgba(var(--brand-pink-rgb), 0.4) 0%,
-      rgba(var(--brand-pink-rgb), 0.1) 100%);
-}
-.ds-tab-item--active:hover {
-  background: rgba(var(--brand-pink-rgb), 0.25);
-}
-.ds-tab-item__icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.5rem;
-  height: 1.5rem;
-}
-.ds-tab-item__icon svg {
-  width: 100%;
-  height: 100%;
-}
-.ds-tab-item__label {
-  white-space: nowrap;
-}
-.ds-floating-tab-bar--compact .ds-tab-item {
-  padding: var(--space-3);
-  min-width: auto;
-}
-.ds-floating-tab-bar--compact .ds-tab-item__label {
-  display: none;
-}
-@media (prefers-contrast: more) {
-  .ds-floating-tab-bar {
-    background: var(--hc-surface);
-    border: 1px solid var(--hc-border);
-  }
-  .ds-floating-tab-bar::before {
-    display: none;
-  }
-  .ds-tab-item--active {
-    background: rgba(var(--brand-pink-rgb), 0.4);
-    border: 1px solid rgba(var(--brand-pink-rgb), 0.6);
-  }
-}
-@supports not (backdrop-filter: blur(1px)) {
-  .ds-floating-tab-bar {
-    background: var(--fallback-surface);
-  }
-}
-
-/* src/components/StatusBadge/StatusBadge.css */
-.ds-status-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-2);
-  font-family: var(--font-family);
-  font-weight: var(--font-weight-medium);
-  color: var(--text-primary);
-  border-radius: var(--radius-badge);
-  white-space: nowrap;
-  background: var(--glass-base);
-  backdrop-filter: blur(12px) saturate(140%);
-  -webkit-backdrop-filter: blur(12px) saturate(140%);
-}
-.ds-status-badge--sm {
-  font-size: var(--font-size-xs);
-  padding: var(--space-1) var(--space-2);
-}
-.ds-status-badge--md {
-  font-size: var(--font-size-sm);
-  padding: var(--space-1) var(--space-3);
-}
-.ds-status-badge--default {
-  box-shadow: var(--shadow-inset-border-subtle), var(--shadow-sm);
-}
-.ds-status-badge--success {
-  background: rgba(var(--status-success-rgb), 0.08);
-  box-shadow:
-    inset 0 0 0 1px rgba(var(--status-success-rgb), 0.4),
-    var(--shadow-sm),
-    0 0 12px rgba(var(--status-success-rgb), 0.1);
-  color: var(--status-success);
-}
-.ds-status-badge--warning {
-  background: rgba(var(--status-warning-rgb), 0.08);
-  box-shadow:
-    inset 0 0 0 1px rgba(var(--status-warning-rgb), 0.4),
-    var(--shadow-sm),
-    0 0 12px rgba(var(--status-warning-rgb), 0.1);
-  color: var(--status-warning);
-}
-.ds-status-badge--error {
-  background: rgba(var(--status-error-rgb), 0.08);
-  box-shadow:
-    inset 0 0 0 1px rgba(var(--status-error-rgb), 0.4),
-    var(--shadow-sm),
-    0 0 12px rgba(var(--status-error-rgb), 0.1);
-  color: var(--status-error);
-}
-.ds-status-badge--info {
-  background: rgba(var(--status-info-rgb), 0.08);
-  box-shadow:
-    inset 0 0 0 1px rgba(var(--status-info-rgb), 0.4),
-    var(--shadow-sm),
-    0 0 12px rgba(var(--status-info-rgb), 0.1);
-  color: var(--status-info);
-}
-.ds-status-badge__dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-.ds-status-badge--default .ds-status-badge__dot {
-  background: var(--text-secondary);
-  box-shadow: 0 0 6px var(--glass-highlight-strong);
-}
-.ds-status-badge--success .ds-status-badge__dot {
-  background: var(--status-success);
-  box-shadow: 0 0 8px rgba(var(--status-success-rgb), 0.5);
-}
-.ds-status-badge--warning .ds-status-badge__dot {
-  background: var(--status-warning);
-  box-shadow: 0 0 8px rgba(var(--status-warning-rgb), 0.5);
-}
-.ds-status-badge--error .ds-status-badge__dot {
-  background: var(--status-error);
-  box-shadow: 0 0 8px rgba(var(--status-error-rgb), 0.5);
-}
-.ds-status-badge--info .ds-status-badge__dot {
-  background: var(--status-info);
-  box-shadow: 0 0 8px rgba(var(--status-info-rgb), 0.5);
-}
-.ds-status-badge--dot:empty {
-  padding: var(--space-1);
-}
-.ds-status-badge--dot:empty .ds-status-badge__dot {
-  width: 8px;
-  height: 8px;
-}
-@media (prefers-contrast: more) {
-  .ds-status-badge {
-    border: 1px solid currentColor;
-  }
-  .ds-status-badge--default {
-    border-color: var(--hc-border-strong);
-  }
-}
-@supports not (backdrop-filter: blur(1px)) {
-  .ds-status-badge {
-    background: var(--fallback-surface);
-  }
-  .ds-status-badge--success {
-    background: var(--fallback-surface);
-  }
-  .ds-status-badge--warning {
-    background: var(--fallback-surface);
-  }
-  .ds-status-badge--error {
-    background: var(--fallback-surface);
-  }
-  .ds-status-badge--info {
-    background: var(--fallback-surface);
-  }
-}
-
-/* src/components/Shell/Shell.css */
-.ds-shell {
-  position: relative;
-  width: 100%;
-  min-height: 100%;
-  display: flex;
-}
-.ds-shell__content {
-  flex: 1;
-  width: 100%;
-  padding: var(--space-6);
-  padding-top: calc(var(--float-distance) + var(--space-4));
-  padding-bottom: calc(var(--float-distance) + var(--space-4));
-  box-sizing: border-box;
-}
-.ds-shell--left .ds-shell__content {
-  padding-left: calc(var(--sidebar-width, 280px) + var(--float-distance) * 2);
-  padding-right: var(--float-distance);
-}
-.ds-shell--right .ds-shell__content {
-  padding-right: calc(var(--sidebar-width, 280px) + var(--float-distance) * 2);
-  padding-left: var(--float-distance);
-}
-.ds-shell--bottom {
-  flex-direction: column;
-}
-.ds-shell--bottom .ds-shell__content {
-  padding-left: var(--float-distance);
-  padding-right: var(--float-distance);
-  padding-bottom: calc(80px + var(--float-distance) * 2);
-}
-@media (max-width: 768px) {
-  .ds-shell--left .ds-shell__content,
-  .ds-shell--right .ds-shell__content {
-    padding-left: var(--float-distance);
-    padding-right: var(--float-distance);
-  }
-  .ds-shell__content {
-    padding-bottom: calc(var(--float-distance) + env(safe-area-inset-bottom, 0px));
-  }
-}
-
-/* src/components/AppearancePanel/AppearancePanel.css */
-@media (max-width: 768px) {
-  .ds-appearance-panel {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    max-width: 100%;
-    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
-    z-index: var(--z-modal);
-    animation: ds-panel-slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-    max-height: 60vh;
-    overflow-y: auto;
-    padding-bottom: env(safe-area-inset-bottom, 24px);
-  }
-  .ds-appearance-panel::before {
-    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
-  }
-}
-@keyframes ds-panel-slide-up {
-  from {
-    transform: translateY(100%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-.ds-appearance-panel {
-  position: relative;
-  padding: var(--space-6);
-  border-radius: var(--radius-card);
-  max-width: 400px;
-  max-height: 85vh;
-  overflow-y: auto;
-  background: var(--glass-base);
-  backdrop-filter: var(--glass-backdrop);
-  -webkit-backdrop-filter: var(--glass-backdrop);
-  box-shadow: var(--glass-shadow-combined);
-}
-.ds-appearance-panel::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  padding: var(--space-px);
-  background:
-    linear-gradient(
-      180deg,
-      var(--rim-light-top) 0%,
-      var(--rim-light-bottom) 100%);
-  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  mask-composite: exclude;
-  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  -webkit-mask-composite: xor;
-  pointer-events: none;
-}
-.ds-appearance-panel__title {
-  font-family: var(--font-family);
-  font-size: var(--font-size-lg);
-  font-weight: var(--font-weight-semibold);
-  color: var(--text-primary);
-  margin: 0 0 var(--space-6);
-}
-.ds-appearance-panel__section {
-  border: none;
-  padding: 0;
-  margin: 0 0 var(--space-6);
-}
-.ds-appearance-panel__section:last-of-type {
-  margin-bottom: var(--space-4);
-}
-.ds-appearance-panel__legend {
-  font-family: var(--font-family);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-semibold);
-  color: var(--text-tertiary);
-  text-transform: uppercase;
-  letter-spacing: var(--letter-spacing-wide);
-  margin-bottom: var(--space-3);
-}
-.ds-appearance-panel__options {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-}
-.ds-appearance-panel__options--row {
-  flex-direction: row;
-  gap: var(--space-3);
-}
-.ds-appearance-panel__options--row .ds-appearance-panel__option {
-  flex: 1;
-}
-.ds-appearance-panel__option {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-  padding: var(--space-3) var(--space-4);
-  border-radius: var(--radius-button);
-  cursor: pointer;
-  transition: background var(--transition-glass);
-  background: transparent;
-}
-.ds-appearance-panel__option:hover {
-  background: var(--glass-base-hover);
-}
-.ds-appearance-panel__option--active {
-  background: rgba(var(--accent-rgb), 0.15);
-}
-.ds-appearance-panel__option--active:hover {
-  background: rgba(var(--accent-rgb), 0.2);
-}
-.ds-appearance-panel__option--toggle {
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--space-1);
-  padding: var(--space-3);
-  text-align: center;
-}
-.ds-appearance-panel__option--toggle .ds-appearance-panel__option-content {
-  width: 100%;
-  text-align: center;
-}
-.ds-appearance-panel__radio {
-  appearance: none;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  border: 2px solid var(--text-tertiary);
-  transition: all var(--transition-glass);
-  flex-shrink: 0;
-}
-.ds-appearance-panel__option--toggle .ds-appearance-panel__radio {
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-}
-.ds-appearance-panel__option--active .ds-appearance-panel__radio {
-  border-color: rgba(var(--accent-rgb), 1);
-  background: rgba(var(--accent-rgb), 1);
-  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.4);
-}
-.ds-appearance-panel__option-content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-0-5);
-}
-.ds-appearance-panel__option-label {
-  font-family: var(--font-family);
-  font-size: var(--font-size-base);
-  color: var(--text-primary);
-}
-.ds-appearance-panel__option-description {
-  font-family: var(--font-family);
-  font-size: var(--font-size-xs);
-  color: var(--text-tertiary);
-}
-.ds-appearance-panel__color-picker {
-  margin-top: var(--space-4);
-  padding: var(--space-4);
-  border-radius: var(--radius-button);
-  background: var(--glass-base);
-  border: 1px solid rgba(var(--accent-rgb), 0.2);
-}
-.ds-appearance-panel__color-label {
-  display: block;
-  font-family: var(--font-family);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
-  color: var(--text-secondary);
-  margin-bottom: var(--space-2);
-}
-.ds-appearance-panel__color-input-wrapper {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-}
-.ds-appearance-panel__color-input {
-  width: 48px;
-  height: 48px;
-  padding: 0;
-  border: none;
-  border-radius: var(--radius-badge);
-  cursor: pointer;
-  background: transparent;
-  overflow: hidden;
-}
-.ds-appearance-panel__color-input::-webkit-color-swatch-wrapper {
-  padding: 0;
-}
-.ds-appearance-panel__color-input::-webkit-color-swatch {
-  border: 2px solid var(--rim-light-top);
-  border-radius: var(--radius-badge);
-  box-shadow: var(--shadow-md);
-}
-.ds-appearance-panel__color-input::-moz-color-swatch {
-  border: 2px solid var(--rim-light-top);
-  border-radius: var(--radius-badge);
-  box-shadow: var(--shadow-md);
-}
-.ds-appearance-panel__color-input:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-  border-radius: var(--radius-badge);
-}
-.ds-appearance-panel__color-value {
-  font-family: var(--font-family-mono);
-  font-size: var(--font-size-sm);
-  color: var(--text-secondary);
-  padding: var(--space-2) var(--space-3);
-  background: var(--glass-base);
-  border-radius: var(--radius-badge);
-  border: 1px solid var(--rim-light-bottom);
-}
-.ds-appearance-panel__reset {
-  display: block;
-  width: 100%;
-  padding: var(--space-3) var(--space-4);
-  border: none;
-  border-radius: var(--radius-button);
-  background: var(--btn-secondary-bg);
-  color: var(--text-secondary);
-  font-family: var(--font-family);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-  cursor: pointer;
-  transition: all var(--transition-glass);
-}
-.ds-appearance-panel__reset:hover {
-  background: var(--btn-secondary-bg-hover);
-  color: var(--text-primary);
-}
-.ds-appearance-panel__reset:focus-visible {
-  box-shadow: var(--focus-ring);
-  outline: none;
-}
-@media (prefers-contrast: more) {
-  .ds-appearance-panel {
-    border: 1px solid var(--hc-border);
-  }
-  .ds-appearance-panel__color-picker {
-    border: 1px solid var(--hc-border);
-  }
-}
-
-/* src/components/LocaleDropdown/LocaleDropdown.css */
-.ds-locale-dropdown {
-  position: relative;
-  display: inline-flex;
-  flex-shrink: 0;
-}
-.ds-locale-dropdown__wrapper {
-  position: relative;
-}
-.ds-locale-dropdown__trigger {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-1-5);
-  padding: var(--space-2) var(--space-2-5);
-  border: none;
-  border-radius: var(--radius-button);
-  background: transparent;
-  color: var(--text-secondary);
-  font-family: var(--font-family);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
-  line-height: 1;
-  cursor: pointer;
-  white-space: nowrap;
-  transition: background var(--transition-fast), color var(--transition-fast);
-}
-.ds-locale-dropdown__trigger:hover {
-  background: var(--glass-base-hover);
-  color: var(--text-primary);
-}
-.ds-locale-dropdown__trigger:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-}
-.ds-locale-dropdown__trigger-icon {
-  display: flex;
-  align-items: center;
-  color: var(--text-tertiary);
-  flex-shrink: 0;
-}
-.ds-locale-dropdown__trigger-flag {
-  font-size: var(--font-size-xs);
-  line-height: 1;
-  display: inline-flex;
-  align-items: center;
-  height: 16px;
-  overflow: hidden;
-}
-.ds-locale-dropdown__trigger-chevron {
-  display: inline-flex;
-  align-items: center;
-  color: var(--text-tertiary);
-  flex-shrink: 0;
-  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), color var(--transition-fast);
-}
-.ds-locale-dropdown__trigger-chevron[data-state=open] {
-  transform: rotate(180deg);
-}
-.ds-locale-dropdown__trigger:hover .ds-locale-dropdown__trigger-chevron {
-  color: var(--text-secondary);
-}
-.ds-locale-dropdown__panel {
-  position: absolute;
-  top: calc(100% + var(--space-2));
-  right: 0;
-  min-width: 180px;
-  padding: var(--space-1-5);
-  z-index: var(--z-dropdown);
-  transform-origin: top right;
-  overflow: hidden;
-  background: var(--void-base);
-  backdrop-filter: blur(24px) saturate(180%);
-  -webkit-backdrop-filter: blur(24px) saturate(180%);
-  border: 1px solid var(--rim-light-bottom);
-  border-radius: var(--radius-card);
-  box-shadow: var(--shadow-xl), 0 0 0 1px var(--rim-light-bottom);
-  opacity: 0;
-  transform: translateY(-8px) scale(0.95);
-  visibility: hidden;
-  pointer-events: none;
-  transition:
-    opacity 0.15s cubic-bezier(0.4, 0, 1, 1),
-    transform 0.15s cubic-bezier(0.4, 0, 1, 1),
-    visibility 0s 0.15s;
-}
-.ds-locale-dropdown__panel[data-state=open] {
-  opacity: 1;
-  transform: translateY(0) scale(1);
-  visibility: visible;
-  pointer-events: auto;
-  transition:
-    opacity 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
-    transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
-    visibility 0s 0s;
-}
-.ds-locale-dropdown--up .ds-locale-dropdown__panel {
-  top: auto;
-  bottom: calc(100% + var(--space-2));
-  transform-origin: bottom right;
-}
-.ds-locale-dropdown--up .ds-locale-dropdown__panel[data-state=closed] {
-  transform: translateY(8px) scale(0.95);
-}
-.ds-locale-dropdown--align-left .ds-locale-dropdown__panel {
-  right: auto;
-  left: 0;
-  transform-origin: top left;
-}
-.ds-locale-dropdown--align-center .ds-locale-dropdown__panel {
-  right: auto;
-  left: 50%;
-  transform-origin: top center;
-}
-.ds-locale-dropdown--align-center .ds-locale-dropdown__panel[data-state=closed] {
-  transform: translateX(-50%) translateY(-8px) scale(0.95);
-}
-.ds-locale-dropdown--align-center .ds-locale-dropdown__panel[data-state=open] {
-  transform: translateX(-50%) translateY(0) scale(1);
-}
-.ds-locale-dropdown--up.ds-locale-dropdown--align-left .ds-locale-dropdown__panel {
-  transform-origin: bottom left;
-}
-.ds-locale-dropdown--up.ds-locale-dropdown--align-center .ds-locale-dropdown__panel {
-  transform-origin: bottom center;
-}
-.ds-locale-dropdown--up.ds-locale-dropdown--align-center .ds-locale-dropdown__panel[data-state=closed] {
-  transform: translateX(-50%) translateY(8px) scale(0.95);
-}
-.ds-locale-dropdown__panel::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 1px;
-  border-radius: var(--radius-card) var(--radius-card) 0 0;
-  background:
-    linear-gradient(
-      90deg,
-      transparent 0%,
-      var(--rim-light-top) 30%,
-      var(--rim-light-hover-top) 50%,
-      var(--rim-light-top) 70%,
-      transparent 100%);
-  opacity: 0.6;
-  pointer-events: none;
-}
-.ds-locale-dropdown__option {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: var(--space-2) var(--space-3);
-  border: none;
-  border-radius: var(--radius-button);
-  background: transparent;
-  color: var(--text-secondary);
-  font-family: var(--font-family);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-regular);
-  cursor: pointer;
-  text-decoration: none;
-  text-align: left;
-  white-space: nowrap;
-  transition: background var(--transition-fast), color var(--transition-fast);
-}
-.ds-locale-dropdown__option:hover,
-.ds-locale-dropdown__option--focused {
-  background: var(--glass-base-hover);
-  color: var(--text-primary);
-}
-.ds-locale-dropdown__option:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-}
-.ds-locale-dropdown__option--active {
-  background: rgba(var(--brand-pink-rgb), 0.08);
-  color: var(--text-primary);
-  font-weight: var(--font-weight-medium);
-}
-.ds-locale-dropdown__option--active:hover,
-.ds-locale-dropdown__option--active.ds-locale-dropdown__option--focused {
-  background: rgba(var(--brand-pink-rgb), 0.14);
-}
-.ds-locale-dropdown__option-content {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-}
-.ds-locale-dropdown__option-flag {
-  font-size: var(--font-size-sm);
-  line-height: 1;
-  flex-shrink: 0;
-}
-.ds-locale-dropdown__option-label {
-  white-space: nowrap;
-}
-.ds-locale-dropdown__option-check {
-  display: flex;
-  align-items: center;
-  color: rgba(var(--brand-pink-rgb), 1);
-  flex-shrink: 0;
-  margin-left: var(--space-3);
-}
-@media (max-width: 1399px) {
-  .ds-locale-dropdown__trigger {
-    padding: var(--space-1-5) var(--space-2);
-    gap: var(--space-1);
-  }
-  .ds-locale-dropdown__trigger-flag {
-    display: none;
-  }
-  .ds-locale-dropdown__trigger-chevron {
-    display: none;
-  }
-}
-:root[data-theme=light] .ds-locale-dropdown__panel,
-:root[data-theme=light-contrast] .ds-locale-dropdown__panel {
-  box-shadow: var(--shadow-sm), 0 0 0 1px var(--rim-light-bottom);
-}
-@media (prefers-reduced-motion: reduce) {
-  .ds-locale-dropdown__trigger {
-    transition: none;
-  }
-  .ds-locale-dropdown__trigger-chevron {
-    transition: none;
-  }
-  .ds-locale-dropdown__panel {
-    transition: none;
-  }
-  .ds-locale-dropdown__option {
-    transition: none;
-  }
-}
-@media (prefers-contrast: more) {
-  .ds-locale-dropdown__trigger {
-    outline: 1px solid var(--hc-border);
-    outline-offset: -1px;
-  }
-  .ds-locale-dropdown__panel {
-    border: 1px solid var(--hc-border);
-    background: var(--hc-surface);
-  }
-  .ds-locale-dropdown__option--active {
-    background: rgba(var(--brand-pink-rgb), 0.3);
-    border: 1px solid rgba(var(--brand-pink-rgb), 0.5);
-  }
-}
-@supports not (backdrop-filter: blur(1px)) {
-  .ds-locale-dropdown__panel {
-    background: var(--fallback-surface);
-  }
-}
-
-/* src/components/Login/Login.css */
-.ds-login {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  padding: var(--space-6);
-}
-.ds-login__accent {
-  position: absolute;
-  border-radius: 50%;
-  filter: blur(80px);
-  opacity: 0.5;
-  pointer-events: none;
-  animation: ds-login-float 20s ease-in-out infinite;
-}
-.ds-login__accent--1 {
-  width: 400px;
-  height: 400px;
-  background:
-    radial-gradient(
-      circle,
-      rgba(var(--accent-rgb), 0.4) 0%,
-      transparent 70%);
-  top: -100px;
-  right: -100px;
-  animation-delay: 0s;
-}
-.ds-login__accent--2 {
-  width: 300px;
-  height: 300px;
-  background:
-    radial-gradient(
-      circle,
-      rgba(var(--accent2-rgb), 0.3) 0%,
-      transparent 70%);
-  bottom: -50px;
-  left: -50px;
-  animation-delay: -10s;
-}
-@keyframes ds-login-float {
-  0%, 100% {
-    transform: translate(0, 0) scale(1);
-  }
-  25% {
-    transform: translate(20px, -30px) scale(1.05);
-  }
-  50% {
-    transform: translate(-10px, 20px) scale(0.95);
-  }
-  75% {
-    transform: translate(-30px, -10px) scale(1.02);
-  }
-}
-.ds-login__card {
-  position: relative;
-  width: 100%;
-  max-width: 420px;
-  padding: var(--space-8);
-  border-radius: var(--radius-panel);
-  background: var(--glass-base);
-  backdrop-filter: var(--glass-backdrop);
-  -webkit-backdrop-filter: var(--glass-backdrop);
-  box-shadow: var(--glass-shadow-elevated-combined);
-  animation: ds-login-card-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-  opacity: 0;
-  transform: translateY(20px);
-}
-.ds-login__card::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  padding: 1px;
-  background:
-    linear-gradient(
-      180deg,
-      var(--rim-light-hover-top) 0%,
-      var(--rim-light-bottom) 100%);
-  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  mask-composite: exclude;
-  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  -webkit-mask-composite: xor;
-  pointer-events: none;
-}
-@keyframes ds-login-card-enter {
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-.ds-login__header {
-  text-align: center;
-  margin-bottom: var(--space-6);
-}
-.ds-login__logo {
-  display: flex;
-  justify-content: center;
-  margin-bottom: var(--space-4);
-  animation: ds-login-fade-in 0.5s ease-out 0.1s forwards;
-  opacity: 0;
-}
-.ds-login__logo--default {
-  display: flex;
-}
-.ds-login__logo-icon {
-  width: 56px;
-  height: 56px;
-  animation: ds-login-logo-pulse 3s ease-in-out infinite;
-}
-.ds-login__logo-icon svg {
-  width: 100%;
-  height: 100%;
-  filter: drop-shadow(0 4px 12px rgba(var(--accent-rgb), 0.3));
-}
-@keyframes ds-login-logo-pulse {
-  0%, 100% {
-    transform: scale(1);
-    filter: drop-shadow(0 4px 12px rgba(var(--accent-rgb), 0.3));
-  }
-  50% {
-    transform: scale(1.05);
-    filter: drop-shadow(0 6px 20px rgba(var(--accent-rgb), 0.5));
-  }
-}
-.ds-login__title {
-  font-family: var(--font-family);
-  font-size: var(--font-size-2xl);
-  font-weight: var(--font-weight-bold);
-  color: var(--text-primary);
-  margin: 0 0 var(--space-2);
-  animation: ds-login-fade-in 0.5s ease-out 0.2s forwards;
-  opacity: 0;
-}
-.ds-login__tagline {
-  font-family: var(--font-family);
-  font-size: var(--font-size-2xl);
-  font-weight: var(--font-weight-bold);
-  color: var(--text-primary);
-  margin: 0 0 var(--space-2);
-  line-height: var(--line-height-normal);
-  animation: ds-login-fade-in 0.5s ease-out 0.3s forwards;
-  opacity: 0;
-}
-@keyframes ds-login-fade-in {
-  to {
-    opacity: 1;
-  }
-}
-.ds-login__error {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  padding: var(--space-3) var(--space-4);
-  margin-bottom: var(--space-4);
-  border-radius: var(--radius-button);
-  background: rgba(var(--status-error-rgb), 0.1);
-  border: 1px solid rgba(var(--status-error-rgb), 0.3);
-  color: var(--status-error);
-  font-size: var(--font-size-sm);
-  animation: ds-login-error-enter 0.4s ease-out;
-}
-@keyframes ds-login-error-enter {
-  0% {
-    opacity: 0;
-    transform: translateX(-10px);
-  }
-  50% {
-    transform: translateX(5px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-.ds-login__social {
-  margin-bottom: var(--space-4);
-  animation: ds-login-fade-in 0.5s ease-out 0.4s forwards;
-  opacity: 0;
-}
-.ds-login__social-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-3);
-  width: 100%;
-  padding: var(--space-3) var(--space-4);
-  margin-bottom: var(--space-3);
-  border: none;
-  border-radius: var(--radius-button);
-  background: var(--glass-base);
-  color: var(--text-primary);
-  font-family: var(--font-family);
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-medium);
-  cursor: pointer;
-  position: relative;
-  transition:
-    background var(--transition-glass),
-    transform var(--transition-glass),
-    box-shadow var(--transition-glass);
-}
-.ds-login__social-btn::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  padding: 1px;
-  background:
-    linear-gradient(
-      180deg,
-      var(--rim-light-top) 0%,
-      var(--rim-light-bottom) 100%);
-  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  mask-composite: exclude;
-  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  -webkit-mask-composite: xor;
-  pointer-events: none;
-  transition: background var(--transition-glass);
-}
-.ds-login__social-btn:hover:not(:disabled) {
-  background: var(--glass-base-hover);
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-lg);
-}
-.ds-login__social-btn:hover:not(:disabled)::before {
-  background:
-    linear-gradient(
-      180deg,
-      var(--rim-light-hover-top) 0%,
-      var(--rim-light-hover-bottom) 100%);
-}
-.ds-login__social-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.ds-login__divider {
-  display: flex;
-  align-items: center;
-  gap: var(--space-4);
-  margin: var(--space-4) 0;
-  color: var(--text-tertiary);
-  font-size: var(--font-size-sm);
-}
-.ds-login__divider::before,
-.ds-login__divider::after {
-  content: "";
-  flex: 1;
-  height: 1px;
-  background:
-    linear-gradient(
-      90deg,
-      transparent 0%,
-      var(--rim-light-top) 50%,
-      transparent 100%);
-}
-.ds-login__form {
-  animation: ds-login-fade-in 0.5s ease-out 0.5s forwards;
-  opacity: 0;
-}
-.ds-login__field {
-  margin-bottom: var(--space-4);
-}
-.ds-login__password-toggle {
-  position: static;
-  transform: none;
-  padding: var(--space-2);
-  border: none;
-  background: transparent;
-  color: var(--text-tertiary);
-  cursor: pointer;
-  border-radius: var(--radius-badge);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: color var(--transition-glass), background var(--transition-glass);
-}
-.ds-login__password-toggle:hover {
-  color: var(--text-primary);
-  background: var(--glass-base-hover);
-}
-.ds-login__options {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: var(--space-6);
-  flex-wrap: wrap;
-  gap: var(--space-2);
-}
-.ds-login__link {
-  padding: 0;
-  border: none;
-  background: transparent;
-  color: var(--text-secondary);
-  font-family: var(--font-family);
-  font-size: var(--font-size-sm);
-  cursor: pointer;
-  transition: color var(--transition-glass);
-}
-.ds-login__link:hover:not(:disabled) {
-  color: var(--text-primary);
-}
-.ds-login__link--accent {
-  color: rgb(var(--accent-rgb));
-  font-weight: var(--font-weight-medium);
-}
-.ds-login__link--accent:hover:not(:disabled) {
-  color: rgb(var(--accent-rgb));
-  text-decoration: underline;
-}
-.ds-login__link:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.ds-login__submit {
-  width: 100%;
-}
-.ds-login__spinner {
-  display: inline-block;
-  width: 20px;
-  height: 20px;
-  border: 2px solid var(--hc-border);
-  border-top-color: var(--hc-control-knob);
-  border-radius: 50%;
-  animation: ds-login-spin 0.8s linear infinite;
-}
-@keyframes ds-login-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-.ds-login__footer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-2);
-  margin-top: var(--space-6);
-  padding-top: var(--space-6);
-  border-top: 1px solid var(--rim-light-bottom);
-  font-size: var(--font-size-sm);
-  color: var(--text-tertiary);
-  animation: ds-login-fade-in 0.5s ease-out 0.6s forwards;
-  opacity: 0;
-}
-@media (max-width: 480px) {
-  .ds-login {
-    padding: var(--space-4);
-  }
-  .ds-login__card {
-    padding: var(--space-6);
-    border-radius: var(--radius-card);
-  }
-  .ds-login__accent--1 {
-    width: 200px;
-    height: 200px;
-    top: -50px;
-    right: -50px;
-  }
-  .ds-login__accent--2 {
-    width: 150px;
-    height: 150px;
-    bottom: -30px;
-    left: -30px;
-  }
-  .ds-login__options {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--space-3);
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .ds-login__card,
-  .ds-login__logo,
-  .ds-login__title,
-  .ds-login__tagline,
-  .ds-login__social,
-  .ds-login__form,
-  .ds-login__footer,
-  .ds-login__trust {
-    animation: none;
-    opacity: 1;
-  }
-  .ds-login__accent {
-    animation: none;
-  }
-  .ds-login__logo-icon {
-    animation: none;
-  }
-  .ds-login__spinner {
-    animation-duration: 1.5s;
-  }
-}
-@media (prefers-contrast: more) {
-  .ds-login__card {
-    border: 1px solid var(--hc-border);
-  }
-  .ds-login__social-btn {
-    border: 1px solid var(--hc-border-subtle);
-  }
-  .ds-login__social-btn::before {
-    display: none;
-  }
-}
-
-/* src/components/ThemeSelector/ThemeSelector.css */
-.ds-theme-selector {
-  display: inline-flex;
-  align-items: center;
-  border: 1px solid var(--rim-light-top);
-  border-radius: var(--radius-badge);
-  padding: var(--space-1);
-  gap: var(--space-1);
-}
-[data-theme=light] .ds-theme-selector,
-[data-theme=light-contrast] .ds-theme-selector {
-  background-color: var(--void-base);
-}
-[data-theme=dark] .ds-theme-selector,
-[data-theme=dark-contrast] .ds-theme-selector {
-  background: var(--glass-base);
-  backdrop-filter: var(--glass-backdrop);
-  -webkit-backdrop-filter: var(--glass-backdrop);
-}
-.ds-theme-selector__btn {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  padding: var(--space-2) var(--space-3);
-  border: none;
-  background: transparent;
-  color: var(--text-secondary);
-  font-family: inherit;
-  font-size: var(--font-size-sm, 14px);
-  font-weight: 500;
-  border-radius: var(--radius-badge);
-  cursor: pointer;
-  transition: color var(--transition-fast), background-color var(--transition-fast);
-  line-height: 1;
-  white-space: nowrap;
-}
-.ds-theme-selector__btn:hover {
-  color: var(--text-primary);
-  background-color: var(--interactive-hover-bg);
-}
-.ds-theme-selector__btn--active {
-  background-color: rgba(var(--accent-rgb), .2);
-  box-shadow: none;
-}
-[data-theme=light] .ds-theme-selector__btn--active .ds-theme-selector__label,
-[data-theme=light-contrast] .ds-theme-selector__btn--active .ds-theme-selector__label,
-[data-theme=dark] .ds-theme-selector__btn--active .ds-theme-selector__label,
-[data-theme=dark-contrast] .ds-theme-selector__btn--active .ds-theme-selector__label {
-  color: var(--text-secondary);
-}
-.ds-theme-selector__btn--active .ds-theme-selector__icon {
-  color: rgb(var(--accent-rgb));
-}
-.ds-theme-selector__icon {
-  width: 16px;
-  height: 16px;
-  color: inherit;
-  transition: color var(--transition-fast);
-}
-
-/* src/components/ColorPicker/ColorPicker.css */
-.ds-color-picker {
-  display: flex;
-  align-items: center;
-  gap: var(--space-1);
-  padding: var(--space-1);
-  border-radius: var(--radius-badge);
-  background: var(--interactive-hover-bg);
-  border: 1px solid var(--rim-light-bottom);
-}
-.ds-color-picker__swatch {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--space-1);
-  border: none;
-  border-radius: var(--radius-xs);
-  background: transparent;
-  cursor: pointer;
-  transition: background var(--transition-fast);
-}
-.ds-color-picker__swatch:hover {
-  background: var(--interactive-hover-bg);
-}
-.ds-color-picker__swatch--active {
-  background: var(--interactive-active-bg);
-}
-.ds-color-picker__dot {
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  background: var(--swatch-color);
-  border: 1.5px solid var(--rim-light-bottom);
-  transition: box-shadow var(--transition-fast);
-}
-.ds-color-picker__swatch--active .ds-color-picker__dot {
-  box-shadow: 0 0 0 2px var(--swatch-color);
-}
-.ds-color-picker__swatch--custom {
-  position: relative;
-}
-.ds-color-picker__native-input {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  cursor: pointer;
-  border: none;
-  padding: 0;
-}
-
-/* src/components/ChangeEmail/ChangeEmail.css */
-.ds-change-email {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  padding: var(--space-6);
-  box-sizing: border-box;
-}
-.void__content .ds-change-email {
-  min-height: auto;
-  flex: 1;
-}
-.ds-change-email__accent {
-  position: absolute;
-  border-radius: 50%;
-  filter: blur(80px);
-  opacity: 0.5;
-  pointer-events: none;
-  animation: ds-change-email-float 20s ease-in-out infinite;
-}
-.ds-change-email__accent--1 {
-  width: 400px;
-  height: 400px;
-  background:
-    radial-gradient(
-      circle,
-      rgba(var(--accent-rgb), 0.4) 0%,
-      transparent 70%);
-  top: -100px;
-  right: -100px;
-  animation-delay: 0s;
-}
-.ds-change-email__accent--2 {
-  width: 300px;
-  height: 300px;
-  background:
-    radial-gradient(
-      circle,
-      rgba(var(--accent2-rgb), 0.3) 0%,
-      transparent 70%);
-  bottom: -50px;
-  left: -50px;
-  animation-delay: -10s;
-}
-.ds-change-email__container {
-  position: relative;
-  width: 100%;
-  max-width: 420px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-@keyframes ds-change-email-float {
-  0%, 100% {
-    transform: translate(0, 0) scale(1);
-  }
-  25% {
-    transform: translate(20px, -30px) scale(1.05);
-  }
-  50% {
-    transform: translate(-10px, 20px) scale(0.95);
-  }
-  75% {
-    transform: translate(-30px, -10px) scale(1.02);
-  }
-}
-.ds-change-email__card {
-  position: relative;
-  width: 100%;
-  max-width: 420px;
-  padding: var(--space-8);
-  border-radius: var(--radius-panel);
-  background: var(--glass-base);
-  backdrop-filter: var(--glass-backdrop);
-  -webkit-backdrop-filter: var(--glass-backdrop);
-  box-shadow: var(--glass-shadow-elevated-combined);
-  animation: ds-change-email-card-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-  opacity: 0;
-  transform: translateY(20px);
-}
-.ds-change-email__card::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  padding: 1px;
-  background:
-    linear-gradient(
-      180deg,
-      var(--rim-light-hover-top) 0%,
-      var(--rim-light-bottom) 100%);
-  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  mask-composite: exclude;
-  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  -webkit-mask-composite: xor;
-  pointer-events: none;
-}
-@keyframes ds-change-email-card-enter {
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-.ds-change-email__header {
-  text-align: center;
-  margin-bottom: var(--space-6);
-}
-.ds-change-email__logo {
-  display: flex;
-  justify-content: center;
-  margin-bottom: var(--space-4);
-  animation: ds-change-email-fade-in 0.5s ease-out 0.1s forwards;
-  opacity: 0;
-}
-.ds-change-email__logo--default {
-}
-.ds-change-email__logo-icon {
-  width: 56px;
-  height: 56px;
-  animation: ds-change-email-logo-pulse 3s ease-in-out infinite;
-}
-.ds-change-email__logo-icon svg {
-  width: 100%;
-  height: 100%;
-  filter: drop-shadow(0 4px 12px rgba(var(--accent-rgb), 0.3));
-}
-@keyframes ds-change-email-logo-pulse {
-  0%, 100% {
-    transform: scale(1);
-    filter: drop-shadow(0 4px 12px rgba(var(--accent-rgb), 0.3));
-  }
-  50% {
-    transform: scale(1.05);
-    filter: drop-shadow(0 6px 20px rgba(var(--accent-rgb), 0.5));
-  }
-}
-.ds-change-email__title {
-  font-family: var(--font-family);
-  font-size: var(--font-size-2xl);
-  font-weight: var(--font-weight-bold);
-  color: var(--text-primary);
-  margin: 0 0 var(--space-2);
-  animation: ds-change-email-fade-in 0.5s ease-out 0.2s forwards;
-  opacity: 0;
-}
-.ds-change-email__tagline {
-  font-family: var(--font-family);
-  font-size: var(--font-size-sm);
-  color: var(--text-secondary);
-  margin: 0;
-  line-height: var(--line-height-normal);
-  animation: ds-change-email-fade-in 0.5s ease-out 0.3s forwards;
-  opacity: 0;
-}
-@keyframes ds-change-email-fade-in {
-  to {
-    opacity: 1;
-  }
-}
-.ds-change-email__error {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  padding: var(--space-3) var(--space-4);
-  margin-bottom: var(--space-4);
-  border-radius: var(--radius-button);
-  background: rgba(var(--status-error-rgb), 0.1);
-  border: 1px solid rgba(var(--status-error-rgb), 0.3);
-  color: var(--status-error);
-  font-size: var(--font-size-sm);
-  animation: ds-change-email-error-enter 0.4s ease-out;
-}
-@keyframes ds-change-email-error-enter {
-  0% {
-    opacity: 0;
-    transform: translateX(-10px);
-  }
-  50% {
-    transform: translateX(5px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-.ds-change-email__social {
-  margin-bottom: var(--space-4);
-  animation: ds-change-email-fade-in 0.5s ease-out 0.4s forwards;
-  opacity: 0;
-}
-.ds-change-email__social-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-3);
-  width: 100%;
-  padding: var(--space-3) var(--space-4);
-  margin-bottom: var(--space-3);
-  border: none;
-  border-radius: var(--radius-button);
-  background: var(--glass-base);
-  color: var(--text-primary);
-  font-family: var(--font-family);
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-medium);
-  cursor: pointer;
-  position: relative;
-  transition:
-    background var(--transition-glass),
-    transform var(--transition-glass),
-    box-shadow var(--transition-glass);
-}
-.ds-change-email__social-btn::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  padding: 1px;
-  background:
-    linear-gradient(
-      180deg,
-      var(--rim-light-top) 0%,
-      var(--rim-light-bottom) 100%);
-  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  mask-composite: exclude;
-  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  -webkit-mask-composite: xor;
-  pointer-events: none;
-  transition: background var(--transition-glass);
-}
-.ds-change-email__social-btn:hover:not(:disabled) {
-  background: var(--glass-base-hover);
-  transform: translateY(-2px);
-  box-shadow: 0 8px 24px var(--shadow-color-heavy, rgba(0, 0, 0, 0.2));
-}
-.ds-change-email__social-btn:hover:not(:disabled)::before {
-  background:
-    linear-gradient(
-      180deg,
-      var(--rim-light-hover-top) 0%,
-      var(--rim-light-hover-bottom) 100%);
-}
-.ds-change-email__social-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.ds-change-email__divider {
-  display: flex;
-  align-items: center;
-  gap: var(--space-4);
-  margin: var(--space-4) 0;
-  color: var(--text-tertiary);
-  font-family: var(--font-family);
-  font-size: var(--font-size-sm);
-}
-.ds-change-email__divider::before,
-.ds-change-email__divider::after {
-  content: "";
-  flex: 1;
-  height: 1px;
-  background:
-    linear-gradient(
-      90deg,
-      transparent 0%,
-      var(--rim-light-top) 50%,
-      transparent 100%);
-}
-.ds-change-email__form {
-  animation: ds-change-email-fade-in 0.5s ease-out 0.5s forwards;
-  opacity: 0;
-}
-.ds-change-email__field {
-  margin-bottom: var(--space-4);
-}
-.ds-change-email__password-toggle {
-  position: static;
-  transform: none;
-  padding: var(--space-2);
-  border: none;
-  background: transparent;
-  color: var(--text-tertiary);
-  cursor: pointer;
-  border-radius: var(--radius-badge);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: color var(--transition-glass), background var(--transition-glass);
-}
-.ds-change-email__password-toggle:hover {
-  color: var(--text-primary);
-  background: var(--glass-base-hover);
-}
-.ds-change-email__options {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: var(--space-6);
-  flex-wrap: wrap;
-  gap: var(--space-2);
-}
-.ds-change-email__link {
-  padding: 0;
-  border: none;
-  background: transparent;
-  color: var(--text-secondary);
-  font-family: var(--font-family);
-  font-size: var(--font-size-sm);
-  cursor: pointer;
-  transition: color var(--transition-glass);
-}
-.ds-change-email__link:hover:not(:disabled) {
-  color: var(--text-primary);
-}
-.ds-change-email__link--accent {
-  color: rgb(var(--accent-rgb));
-  font-weight: var(--font-weight-medium);
-}
-.ds-change-email__link--accent:hover:not(:disabled) {
-  color: rgb(var(--accent-rgb));
-  text-decoration: underline;
-}
-.ds-change-email__link:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.ds-change-email__submit {
-  width: 100%;
-}
-.ds-change-email__spinner {
-  display: inline-block;
-  width: 20px;
-  height: 20px;
-  border: 2px solid var(--border-subtle, rgba(255, 255, 255, 0.3));
-  border-top-color: var(--text-primary, white);
-  border-radius: 50%;
-  animation: ds-change-email-spin 0.8s linear infinite;
-}
-@keyframes ds-change-email-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-.ds-change-email__footer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-2);
-  margin-top: var(--space-6);
-  padding-top: var(--space-6);
-  border-top: 1px solid var(--rim-light-bottom);
-  font-family: var(--font-family);
-  font-size: var(--font-size-sm);
-  color: var(--text-tertiary);
-  animation: ds-change-email-fade-in 0.5s ease-out 0.6s forwards;
-  opacity: 0;
-}
-.ds-change-email__trust {
-  padding-top: var(--space-6);
-  padding-bottom: var(--space-2);
-  text-align: center;
-  font-family: var(--font-family);
-  font-size: var(--font-size-xs);
-  color: var(--text-tertiary);
-  animation: ds-change-email-fade-in 0.5s ease-out 0.7s forwards;
-  opacity: 0;
-}
-@media (max-width: 480px) {
-  .ds-change-email {
-    padding: var(--space-4);
-  }
-  .ds-change-email__card {
-    padding: var(--space-6);
-    border-radius: var(--radius-card);
-  }
-  .ds-change-email__accent--1 {
-    width: 200px;
-    height: 200px;
-    top: -50px;
-    right: -50px;
-  }
-  .ds-change-email__accent--2 {
-    width: 150px;
-    height: 150px;
-    bottom: -30px;
-    left: -30px;
-  }
-  .ds-change-email__options {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--space-3);
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .ds-change-email__card,
-  .ds-change-email__logo,
-  .ds-change-email__title,
-  .ds-change-email__tagline,
-  .ds-change-email__social,
-  .ds-change-email__form,
-  .ds-change-email__footer,
-  .ds-change-email__trust {
-    animation: none;
-    opacity: 1;
-  }
-  .ds-change-email__accent {
-    animation: none;
-  }
-  .ds-change-email__logo-icon {
-    animation: none;
-  }
-  .ds-change-email__spinner {
-    animation-duration: 1.5s;
-  }
-}
-@media (prefers-contrast: more) {
-  .ds-change-email__card {
-    border: 1px solid var(--hc-border);
-  }
-  .ds-change-email__social-btn {
-    border: 1px solid var(--hc-border-subtle);
-  }
-  .ds-change-email__social-btn::before {
-    display: none;
-  }
-}
-
-/* src/components/Signup/Signup.css */
-.ds-signup {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  padding: var(--space-6) var(--space-4);
-  box-sizing: border-box;
-}
-.ds-signup__accent {
-  position: absolute;
-  border-radius: 50%;
-  filter: blur(80px);
-  opacity: 0.5;
-  pointer-events: none;
-  animation: ds-signup-float 20s ease-in-out infinite;
-}
-.ds-signup__accent--1 {
-  width: 400px;
-  height: 400px;
-  background:
-    radial-gradient(
-      circle,
-      rgba(var(--accent-rgb), 0.4) 0%,
-      transparent 70%);
-  top: -100px;
-  right: -100px;
-  animation-delay: 0s;
-}
-.ds-signup__accent--2 {
-  width: 300px;
-  height: 300px;
-  background:
-    radial-gradient(
-      circle,
-      rgba(var(--accent2-rgb), 0.3) 0%,
-      transparent 70%);
-  bottom: -50px;
-  left: -50px;
-  animation-delay: -10s;
-}
-@keyframes ds-signup-float {
-  0%, 100% {
-    transform: translate(0, 0) scale(1);
-  }
-  25% {
-    transform: translate(20px, -30px) scale(1.05);
-  }
-  50% {
-    transform: translate(-10px, 20px) scale(0.95);
-  }
-  75% {
-    transform: translate(-30px, -10px) scale(1.02);
-  }
-}
-.ds-signup__card {
-  position: relative;
-  width: 100%;
-  max-width: 420px;
-  padding: var(--space-8);
-  border-radius: var(--radius-panel);
-  background: var(--glass-base);
-  backdrop-filter: var(--glass-backdrop);
-  -webkit-backdrop-filter: var(--glass-backdrop);
-  box-shadow: var(--glass-shadow-elevated-combined);
-  animation: ds-signup-card-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-  opacity: 0;
-  transform: translateY(20px);
-}
-.ds-signup__card::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  padding: 1px;
-  background:
-    linear-gradient(
-      180deg,
-      var(--rim-light-hover-top) 0%,
-      var(--rim-light-bottom) 100%);
-  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  mask-composite: exclude;
-  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  -webkit-mask-composite: xor;
-  pointer-events: none;
-}
-@keyframes ds-signup-card-enter {
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-.ds-signup__card--success {
-  text-align: center;
-}
-.ds-signup__success-icon {
-  width: 64px;
-  height: 64px;
-  margin: 0 auto var(--space-6);
-  animation: ds-signup-success-icon 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-}
-.ds-signup__success-icon svg {
-  width: 100%;
-  height: 100%;
-}
-@keyframes ds-signup-success-icon {
-  0% {
-    transform: scale(0);
-    opacity: 0;
-  }
-  50% {
-    transform: scale(1.2);
-  }
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-.ds-signup__success-title {
-  font-family: var(--font-family);
-  font-size: var(--font-size-2xl);
-  font-weight: var(--font-weight-bold);
-  color: var(--text-primary);
-  margin: 0 0 var(--space-2);
-}
-.ds-signup__success-message {
-  font-family: var(--font-family);
-  font-size: var(--font-size-base);
-  color: var(--text-secondary);
-  margin: 0 0 var(--space-6);
-  line-height: var(--line-height-normal);
-}
-.ds-signup__success-btn {
-  width: 100%;
-}
-.ds-signup__header {
-  text-align: center;
-  margin-bottom: var(--space-6);
-}
-.ds-signup__logo {
-  display: flex;
-  justify-content: center;
-  margin-bottom: var(--space-4);
-  animation: ds-signup-fade-in 0.5s ease-out 0.1s forwards;
-  opacity: 0;
-}
-.ds-signup__logo-icon {
-  width: 56px;
-  height: 56px;
-  animation: ds-signup-logo-pulse 3s ease-in-out infinite;
-}
-.ds-signup__logo-icon svg {
-  width: 100%;
-  height: 100%;
-  filter: drop-shadow(0 4px 12px rgba(var(--accent-rgb), 0.3));
-}
-@keyframes ds-signup-logo-pulse {
-  0%, 100% {
-    transform: scale(1);
-    filter: drop-shadow(0 4px 12px rgba(var(--accent-rgb), 0.3));
-  }
-  50% {
-    transform: scale(1.05);
-    filter: drop-shadow(0 6px 20px rgba(var(--accent-rgb), 0.5));
-  }
-}
-.ds-signup__title {
-  font-family: var(--font-family);
-  font-size: var(--font-size-2xl);
-  font-weight: var(--font-weight-bold);
-  color: var(--text-primary);
-  margin: 0 0 var(--space-2);
-  animation: ds-signup-fade-in 0.5s ease-out 0.2s forwards;
-  opacity: 0;
-}
-.ds-signup__tagline {
-  font-family: var(--font-family);
-  font-size: var(--font-size-sm);
-  color: var(--text-secondary);
-  margin: 0;
-  line-height: var(--line-height-normal);
-  animation: ds-signup-fade-in 0.5s ease-out 0.3s forwards;
-  opacity: 0;
-}
-@keyframes ds-signup-fade-in {
-  to {
-    opacity: 1;
-  }
-}
-.ds-signup__error {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  padding: var(--space-3) var(--space-4);
-  margin-bottom: var(--space-4);
-  border-radius: var(--radius-button);
-  background: rgba(var(--status-error-rgb), 0.1);
-  border: 1px solid rgba(var(--status-error-rgb), 0.3);
-  color: var(--status-error);
-  font-size: var(--font-size-sm);
-  animation: ds-signup-error-enter 0.4s ease-out;
-}
-@keyframes ds-signup-error-enter {
-  0% {
-    opacity: 0;
-    transform: translateX(-10px);
-  }
-  50% {
-    transform: translateX(5px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-.ds-signup__social {
-  margin-bottom: var(--space-4);
-  animation: ds-signup-fade-in 0.5s ease-out 0.4s forwards;
-  opacity: 0;
-}
-.ds-signup__social-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-3);
-  width: 100%;
-  padding: var(--space-3) var(--space-4);
-  margin-bottom: var(--space-3);
-  border: none;
-  border-radius: var(--radius-button);
-  background: var(--glass-base);
-  color: var(--text-primary);
-  font-family: var(--font-family);
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-medium);
-  cursor: pointer;
-  position: relative;
-  transition:
-    background var(--transition-glass),
-    transform var(--transition-glass),
-    box-shadow var(--transition-glass);
-}
-.ds-signup__social-btn::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  padding: 1px;
-  background:
-    linear-gradient(
-      180deg,
-      var(--rim-light-top) 0%,
-      var(--rim-light-bottom) 100%);
-  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  mask-composite: exclude;
-  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  -webkit-mask-composite: xor;
-  pointer-events: none;
-  transition: background var(--transition-glass);
-}
-.ds-signup__social-btn:hover:not(:disabled) {
-  background: var(--glass-base-hover);
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-lg);
-}
-.ds-signup__social-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.ds-signup__divider {
-  display: flex;
-  align-items: center;
-  gap: var(--space-4);
-  margin: var(--space-4) 0;
-  color: var(--text-tertiary);
-  font-size: var(--font-size-sm);
-}
-.ds-signup__divider::before,
-.ds-signup__divider::after {
-  content: "";
-  flex: 1;
-  height: 1px;
-  background:
-    linear-gradient(
-      90deg,
-      transparent 0%,
-      var(--rim-light-top) 50%,
-      transparent 100%);
-}
-.ds-signup__form {
-  animation: ds-signup-fade-in 0.5s ease-out 0.5s forwards;
-  opacity: 0;
-}
-.ds-signup__field {
-  margin-bottom: var(--space-4);
-}
-.ds-signup__phone-container {
-  display: flex;
-  align-items: center;
-  position: relative;
-  width: 100%;
-}
-.ds-signup__phone-container.ds-textfield__input {
-  display: flex;
-  align-items: center;
-  position: relative;
-  width: 100%;
-  padding: 0;
-  overflow: hidden;
-}
-.ds-signup__flag-select-wrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-  align-self: stretch;
-}
-.ds-signup__flag-select-native {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  cursor: pointer;
-  z-index: 2;
-}
-.ds-signup__flag-display {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
-  height: 100%;
-  background: transparent;
-  color: var(--text-primary);
-  border-right: 1px solid var(--border-subtle);
-  pointer-events: none;
-}
-.ds-signup__flag-icon {
-  font-size: var(--font-size-lg);
-  line-height: 1;
-}
-.ds-signup__phone-input-native {
-  flex-grow: 1;
-  border: none !important;
-  background: transparent !important;
-  border-radius: 0 !important;
-  box-shadow: none !important;
-  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3) !important;
-  color: inherit;
-  font-family: inherit;
-  font-size: inherit;
-  outline: none;
-}
-.ds-signup__phone-input-native:focus {
-  outline: none;
-  border-color: transparent !important;
-  box-shadow: none !important;
+.ds-shell--bottom .ds-shell__content {
+  padding-left: var(--float-distance);
+  padding-right: var(--float-distance);
+  padding-bottom: calc(80px + var(--float-distance) * 2);
 }
-.ds-signup__phone-container:disabled,
-.ds-signup__phone-input-native:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+@media (max-width: 768px) {
+  .ds-shell--left .ds-shell__content,
+  .ds-shell--right .ds-shell__content {
+    padding-left: var(--float-distance);
+    padding-right: var(--float-distance);
+  }
+  .ds-shell__content {
+    padding-bottom: calc(var(--float-distance) + env(safe-area-inset-bottom, 0px));
+  }
 }
-.ds-signup__password-wrapper {
+
+/* src/components/LocaleDropdown/LocaleDropdown.css */
+.ds-locale-dropdown {
   position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
 }
-.ds-signup__password-wrapper .ds-textfield__input {
-  padding-right: var(--space-12);
+.ds-locale-dropdown__wrapper {
+  position: relative;
 }
-.ds-signup__password-toggle {
-  position: absolute;
-  right: var(--space-3);
-  top: 60%;
-  transform: translateY(calc(-50% + 10px));
-  padding: var(--space-2);
+.ds-locale-dropdown__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1-5);
+  padding: var(--space-2) var(--space-2-5);
   border: none;
+  border-radius: var(--radius-button);
   background: transparent;
-  color: var(--text-tertiary);
-  cursor: pointer;
-  border-radius: var(--radius-badge);
-  transition: color var(--transition-glass), background var(--transition-glass);
-}
-.ds-signup__password-toggle:hover {
-  color: var(--text-primary);
-  background: var(--glass-base-hover);
-}
-.ds-signup__strength {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-  margin-top: var(--space-2);
-}
-.ds-signup__strength-bar {
-  display: flex;
-  gap: var(--space-1);
-  flex: 1;
-}
-.ds-signup__strength-segment {
-  height: 4px;
-  flex: 1;
-  border-radius: 2px;
-  background: var(--glass-base-hover);
-  transition: background-color var(--transition-fast);
-}
-.ds-signup__strength-segment--active {
-  background: var(--status-success);
-}
-.ds-signup__strength-label {
+  color: var(--text-secondary);
   font-family: var(--font-family);
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-medium);
+  line-height: 1;
+  cursor: pointer;
   white-space: nowrap;
-  transition: color var(--transition-fast);
-}
-.ds-signup__terms {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--space-2);
-  margin-bottom: var(--space-6);
-}
-.ds-signup__terms-text {
-  font-family: var(--font-family);
-  font-size: var(--font-size-sm);
-  color: var(--text-secondary);
-  line-height: var(--line-height-normal);
+  transition: background var(--transition-fast), color var(--transition-fast);
 }
-.ds-signup__link {
-  padding: 0;
-  border: none;
-  background: transparent;
-  color: rgb(var(--accent-rgb));
-  font-family: var(--font-family);
-  font-size: inherit;
-  font-weight: var(--font-weight-medium);
-  cursor: pointer;
-  transition: color var(--transition-glass);
+.ds-locale-dropdown__trigger:hover {
+  background: var(--glass-base-hover);
+  color: var(--text-primary);
 }
-.ds-signup__link:hover:not(:disabled) {
-  text-decoration: underline;
+.ds-locale-dropdown__trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
 }
-.ds-signup__link:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+.ds-locale-dropdown__trigger-icon {
+  display: flex;
+  align-items: center;
+  color: var(--text-tertiary);
+  flex-shrink: 0;
 }
-.ds-signup__link--accent {
-  color: rgb(var(--accent-rgb));
+.ds-locale-dropdown__trigger-flag {
+  font-size: var(--font-size-xs);
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  height: 16px;
+  overflow: hidden;
 }
-.ds-signup__submit {
-  width: 100%;
+.ds-locale-dropdown__trigger-chevron {
+  display: inline-flex;
+  align-items: center;
+  color: var(--text-tertiary);
+  flex-shrink: 0;
+  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), color var(--transition-fast);
 }
-.ds-signup__spinner {
-  display: inline-block;
-  width: 20px;
-  height: 20px;
-  border: 2px solid var(--hc-border);
-  border-top-color: var(--hc-control-knob);
-  border-radius: 50%;
-  animation: ds-signup-spin 0.8s linear infinite;
+.ds-locale-dropdown__trigger-chevron[data-state=open] {
+  transform: rotate(180deg);
 }
-@keyframes ds-signup-spin {
-  to {
-    transform: rotate(360deg);
-  }
+.ds-locale-dropdown__trigger:hover .ds-locale-dropdown__trigger-chevron {
+  color: var(--text-secondary);
 }
-.ds-signup__footer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-2);
-  margin-top: var(--space-6);
-  padding-top: var(--space-6);
-  border-top: 1px solid var(--rim-light-bottom);
-  font-size: var(--font-size-sm);
-  color: var(--text-tertiary);
-  animation: ds-signup-fade-in 0.5s ease-out 0.6s forwards;
+.ds-locale-dropdown__panel {
+  position: absolute;
+  top: calc(100% + var(--space-2));
+  right: 0;
+  min-width: 180px;
+  padding: var(--space-1-5);
+  z-index: var(--z-dropdown);
+  transform-origin: top right;
+  overflow: hidden;
+  background: var(--void-base);
+  backdrop-filter: blur(24px) saturate(180%);
+  -webkit-backdrop-filter: blur(24px) saturate(180%);
+  border: 1px solid var(--rim-light-bottom);
+  border-radius: var(--radius-card);
+  box-shadow: var(--shadow-xl), 0 0 0 1px var(--rim-light-bottom);
   opacity: 0;
+  transform: translateY(-8px) scale(0.95);
+  visibility: hidden;
+  pointer-events: none;
+  transition:
+    opacity 0.15s cubic-bezier(0.4, 0, 1, 1),
+    transform 0.15s cubic-bezier(0.4, 0, 1, 1),
+    visibility 0s 0.15s;
 }
-@media (max-width: 480px) {
-  .ds-signup {
-    padding: var(--space-4);
-  }
-  .ds-signup__card {
-    padding: var(--space-6);
-    border-radius: var(--radius-card);
-  }
-  .ds-signup__accent--1 {
-    width: 200px;
-    height: 200px;
-    top: -50px;
-    right: -50px;
-  }
-  .ds-signup__accent--2 {
-    width: 150px;
-    height: 150px;
-    bottom: -30px;
-    left: -30px;
-  }
+.ds-locale-dropdown__panel[data-state=open] {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  visibility: visible;
+  pointer-events: auto;
+  transition:
+    opacity 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
+    transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
+    visibility 0s 0s;
 }
-@media (prefers-reduced-motion: reduce) {
-  .ds-signup__card,
-  .ds-signup__logo,
-  .ds-signup__title,
-  .ds-signup__tagline,
-  .ds-signup__social,
-  .ds-signup__form,
-  .ds-signup__footer,
-  .ds-signup__trust,
-  .ds-signup__success-icon {
-    animation: none;
-    opacity: 1;
-  }
-  .ds-signup__accent {
-    animation: none;
-  }
-  .ds-signup__logo-icon {
-    animation: none;
-  }
-  .ds-signup__spinner {
-    animation-duration: 1.5s;
-  }
+.ds-locale-dropdown--up .ds-locale-dropdown__panel {
+  top: auto;
+  bottom: calc(100% + var(--space-2));
+  transform-origin: bottom right;
 }
-@media (prefers-contrast: more) {
-  .ds-signup__card {
-    border: 1px solid var(--hc-border);
-  }
-  .ds-signup__social-btn {
-    border: 1px solid var(--hc-border-subtle);
-  }
-  .ds-signup__social-btn::before {
-    display: none;
-  }
+.ds-locale-dropdown--up .ds-locale-dropdown__panel[data-state=closed] {
+  transform: translateY(8px) scale(0.95);
 }
-
-/* src/components/ForgotPassword/ForgotPassword.css */
-.ds-forgot {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: var(--space-6);
+.ds-locale-dropdown--align-left .ds-locale-dropdown__panel {
+  right: auto;
+  left: 0;
+  transform-origin: top left;
 }
-.ds-forgot__accent {
-  position: absolute;
-  border-radius: 50%;
-  filter: blur(80px);
-  opacity: 0.5;
-  pointer-events: none;
-  animation: ds-forgot-float 20s ease-in-out infinite;
+.ds-locale-dropdown--align-center .ds-locale-dropdown__panel {
+  right: auto;
+  left: 50%;
+  transform-origin: top center;
 }
-.ds-forgot__accent--1 {
-  width: 400px;
-  height: 400px;
-  background:
-    radial-gradient(
-      circle,
-      rgba(var(--accent-rgb), 0.4) 0%,
-      transparent 70%);
-  top: -100px;
-  right: -100px;
-  animation-delay: 0s;
+.ds-locale-dropdown--align-center .ds-locale-dropdown__panel[data-state=closed] {
+  transform: translateX(-50%) translateY(-8px) scale(0.95);
 }
-.ds-forgot__accent--2 {
-  width: 300px;
-  height: 300px;
-  background:
-    radial-gradient(
-      circle,
-      rgba(var(--accent2-rgb), 0.3) 0%,
-      transparent 70%);
-  bottom: -50px;
-  left: -50px;
-  animation-delay: -10s;
+.ds-locale-dropdown--align-center .ds-locale-dropdown__panel[data-state=open] {
+  transform: translateX(-50%) translateY(0) scale(1);
 }
-@keyframes ds-forgot-float {
-  0%, 100% {
-    transform: translate(0, 0) scale(1);
-  }
-  25% {
-    transform: translate(20px, -30px) scale(1.05);
-  }
-  50% {
-    transform: translate(-10px, 20px) scale(0.95);
-  }
-  75% {
-    transform: translate(-30px, -10px) scale(1.02);
-  }
+.ds-locale-dropdown--up.ds-locale-dropdown--align-left .ds-locale-dropdown__panel {
+  transform-origin: bottom left;
 }
-.ds-forgot__card {
-  position: relative;
-  width: 100%;
-  max-width: 400px;
-  padding: var(--space-8);
-  border-radius: var(--radius-panel);
-  background: var(--glass-base);
-  backdrop-filter: var(--glass-backdrop);
-  -webkit-backdrop-filter: var(--glass-backdrop);
-  box-shadow: var(--glass-shadow-elevated-combined);
-  animation: ds-forgot-card-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-  opacity: 0;
-  transform: translateY(20px);
+.ds-locale-dropdown--up.ds-locale-dropdown--align-center .ds-locale-dropdown__panel {
+  transform-origin: bottom center;
+}
+.ds-locale-dropdown--up.ds-locale-dropdown--align-center .ds-locale-dropdown__panel[data-state=closed] {
+  transform: translateX(-50%) translateY(8px) scale(0.95);
 }
-.ds-forgot__card::before {
+.ds-locale-dropdown__panel::before {
   content: "";
   position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  padding: 1px;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  border-radius: var(--radius-card) var(--radius-card) 0 0;
   background:
     linear-gradient(
-      180deg,
-      var(--rim-light-hover-top) 0%,
-      var(--rim-light-bottom) 100%);
-  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  mask-composite: exclude;
-  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  -webkit-mask-composite: xor;
-  pointer-events: none;
-}
-.ds-forgot__card--centered {
-  text-align: center;
-}
-@keyframes ds-forgot-card-enter {
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-.ds-forgot__header {
-  text-align: center;
-  margin-bottom: var(--space-6);
+      90deg,
+      transparent 0%,
+      var(--rim-light-top) 30%,
+      var(--rim-light-hover-top) 50%,
+      var(--rim-light-top) 70%,
+      transparent 100%);
+  opacity: 0.6;
+  pointer-events: none;
 }
-.ds-forgot__logo {
+.ds-locale-dropdown__option {
   display: flex;
-  justify-content: center;
-  margin-bottom: var(--space-4);
-  animation: ds-forgot-fade-in 0.5s ease-out 0.1s forwards;
-  opacity: 0;
-}
-.ds-forgot__logo-icon {
-  width: 56px;
-  height: 56px;
-}
-.ds-forgot__logo-icon svg {
+  align-items: center;
+  justify-content: space-between;
   width: 100%;
-  height: 100%;
-  filter: drop-shadow(0 4px 12px rgba(var(--accent-rgb), 0.3));
-}
-.ds-forgot__title {
+  padding: var(--space-2) var(--space-3);
+  border: none;
+  border-radius: var(--radius-button);
+  background: transparent;
+  color: var(--text-secondary);
   font-family: var(--font-family);
-  font-size: var(--font-size-2xl);
-  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-regular);
+  cursor: pointer;
+  text-decoration: none;
+  text-align: left;
+  white-space: nowrap;
+  transition: background var(--transition-fast), color var(--transition-fast);
+}
+.ds-locale-dropdown__option:hover,
+.ds-locale-dropdown__option--focused {
+  background: var(--glass-base-hover);
   color: var(--text-primary);
-  margin: 0 0 var(--space-2);
-  animation: ds-forgot-fade-in 0.5s ease-out 0.2s forwards;
-  opacity: 0;
 }
-.ds-forgot__tagline {
-  font-family: var(--font-family);
-  font-size: var(--font-size-sm);
-  color: var(--text-secondary);
-  margin: 0;
-  line-height: var(--line-height-normal);
-  animation: ds-forgot-fade-in 0.5s ease-out 0.3s forwards;
-  opacity: 0;
+.ds-locale-dropdown__option:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
 }
-.ds-forgot__tagline strong {
+.ds-locale-dropdown__option--active {
+  background: rgba(var(--brand-pink-rgb), 0.08);
   color: var(--text-primary);
+  font-weight: var(--font-weight-medium);
 }
-@keyframes ds-forgot-fade-in {
-  to {
-    opacity: 1;
-  }
+.ds-locale-dropdown__option--active:hover,
+.ds-locale-dropdown__option--active.ds-locale-dropdown__option--focused {
+  background: rgba(var(--brand-pink-rgb), 0.14);
 }
-.ds-forgot__success-icon {
-  width: 64px;
-  height: 64px;
-  margin: 0 auto var(--space-6);
-  animation: ds-forgot-success-icon 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+.ds-locale-dropdown__option-content {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
 }
-.ds-forgot__success-icon svg {
-  width: 100%;
-  height: 100%;
+.ds-locale-dropdown__option-flag {
+  font-size: var(--font-size-sm);
+  line-height: 1;
+  flex-shrink: 0;
 }
-@keyframes ds-forgot-success-icon {
-  0% {
-    transform: scale(0);
-    opacity: 0;
+.ds-locale-dropdown__option-label {
+  white-space: nowrap;
+}
+.ds-locale-dropdown__option-check {
+  display: flex;
+  align-items: center;
+  color: rgba(var(--brand-pink-rgb), 1);
+  flex-shrink: 0;
+  margin-left: var(--space-3);
+}
+@media (max-width: 1399px) {
+  .ds-locale-dropdown__trigger {
+    padding: var(--space-1-5) var(--space-2);
+    gap: var(--space-1);
   }
-  50% {
-    transform: scale(1.2);
+  .ds-locale-dropdown__trigger-flag {
+    display: none;
   }
-  100% {
-    transform: scale(1);
-    opacity: 1;
+  .ds-locale-dropdown__trigger-chevron {
+    display: none;
   }
 }
-.ds-forgot__error {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  padding: var(--space-3) var(--space-4);
-  margin-bottom: var(--space-4);
-  border-radius: var(--radius-button);
-  background: rgba(var(--status-error-rgb), 0.1);
-  border: 1px solid rgba(var(--status-error-rgb), 0.3);
-  color: var(--status-error);
-  font-size: var(--font-size-sm);
-  animation: ds-forgot-error-enter 0.4s ease-out;
+:root[data-theme=light] .ds-locale-dropdown__panel,
+:root[data-theme=light-contrast] .ds-locale-dropdown__panel {
+  box-shadow: var(--shadow-sm), 0 0 0 1px var(--rim-light-bottom);
 }
-@keyframes ds-forgot-error-enter {
-  0% {
-    opacity: 0;
-    transform: translateX(-10px);
+@media (prefers-reduced-motion: reduce) {
+  .ds-locale-dropdown__trigger {
+    transition: none;
+  }
+  .ds-locale-dropdown__trigger-chevron {
+    transition: none;
   }
-  50% {
-    transform: translateX(5px);
+  .ds-locale-dropdown__panel {
+    transition: none;
   }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
+  .ds-locale-dropdown__option {
+    transition: none;
   }
 }
-.ds-forgot__form {
-  animation: ds-forgot-fade-in 0.5s ease-out 0.4s forwards;
-  opacity: 0;
+@media (prefers-contrast: more) {
+  .ds-locale-dropdown__trigger {
+    outline: 1px solid var(--hc-border);
+    outline-offset: -1px;
+  }
+  .ds-locale-dropdown__panel {
+    border: 1px solid var(--hc-border);
+    background: var(--hc-surface);
+  }
+  .ds-locale-dropdown__option--active {
+    background: rgba(var(--brand-pink-rgb), 0.3);
+    border: 1px solid rgba(var(--brand-pink-rgb), 0.5);
+  }
 }
-.ds-forgot__field {
-  margin-bottom: var(--space-4);
+@supports not (backdrop-filter: blur(1px)) {
+  .ds-locale-dropdown__panel {
+    background: var(--fallback-surface);
+  }
 }
-.ds-forgot__password-wrapper {
-  position: relative;
+
+/* src/components/ThemeSelector/ThemeSelector.css */
+.ds-theme-selector {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--rim-light-top);
+  border-radius: var(--radius-badge);
+  padding: var(--space-1);
+  gap: var(--space-1);
 }
-.ds-forgot__password-wrapper .ds-textfield__input {
-  padding-right: var(--space-12);
+[data-theme=light] .ds-theme-selector,
+[data-theme=light-contrast] .ds-theme-selector {
+  background-color: var(--void-base);
 }
-.ds-forgot__password-toggle {
-  position: absolute;
-  right: var(--space-3);
-  top: 60%;
-  transform: translateY(calc(-50% + 10px));
-  padding: var(--space-2);
+[data-theme=dark] .ds-theme-selector,
+[data-theme=dark-contrast] .ds-theme-selector {
+  background: var(--glass-base);
+  backdrop-filter: var(--glass-backdrop);
+  -webkit-backdrop-filter: var(--glass-backdrop);
+}
+.ds-theme-selector__btn {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
   border: none;
   background: transparent;
-  color: var(--text-tertiary);
-  cursor: pointer;
+  color: var(--text-secondary);
+  font-family: inherit;
+  font-size: var(--font-size-sm, 14px);
+  font-weight: 500;
   border-radius: var(--radius-badge);
-  transition: color var(--transition-glass), background var(--transition-glass);
+  cursor: pointer;
+  transition: color var(--transition-fast), background-color var(--transition-fast);
+  line-height: 1;
+  white-space: nowrap;
 }
-.ds-forgot__password-toggle:hover {
+.ds-theme-selector__btn:hover {
   color: var(--text-primary);
-  background: var(--glass-base-hover);
-}
-.ds-forgot__submit {
-  width: 100%;
-  margin-top: var(--space-2);
-}
-.ds-forgot__spinner {
-  display: inline-block;
-  width: 20px;
-  height: 20px;
-  border: 2px solid var(--hc-border);
-  border-top-color: white;
-  border-radius: 50%;
-  animation: ds-forgot-spin 0.8s linear infinite;
+  background-color: var(--interactive-hover-bg);
 }
-@keyframes ds-forgot-spin {
-  to {
-    transform: rotate(360deg);
-  }
+.ds-theme-selector__btn--active {
+  background-color: rgba(var(--accent-rgb), .2);
+  box-shadow: none;
 }
-.ds-forgot__hint {
-  margin-top: var(--space-6);
-  font-family: var(--font-family);
-  font-size: var(--font-size-sm);
-  color: var(--text-tertiary);
+[data-theme=light] .ds-theme-selector__btn--active .ds-theme-selector__label,
+[data-theme=light-contrast] .ds-theme-selector__btn--active .ds-theme-selector__label,
+[data-theme=dark] .ds-theme-selector__btn--active .ds-theme-selector__label,
+[data-theme=dark-contrast] .ds-theme-selector__btn--active .ds-theme-selector__label {
+  color: var(--text-secondary);
 }
-.ds-forgot__link {
-  padding: 0;
-  border: none;
-  background: transparent;
+.ds-theme-selector__btn--active .ds-theme-selector__icon {
   color: rgb(var(--accent-rgb));
-  font-family: var(--font-family);
-  font-size: inherit;
-  font-weight: var(--font-weight-medium);
-  cursor: pointer;
-  transition: color var(--transition-glass);
-  margin-left: var(--space-1);
-}
-.ds-forgot__link:hover:not(:disabled) {
-  text-decoration: underline;
 }
-.ds-forgot__link:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+.ds-theme-selector__icon {
+  width: 16px;
+  height: 16px;
+  color: inherit;
+  transition: color var(--transition-fast);
 }
-.ds-forgot__footer {
+
+/* src/components/ColorPicker/ColorPicker.css */
+.ds-color-picker {
   display: flex;
-  justify-content: center;
-  margin-top: var(--space-6);
-  padding-top: var(--space-6);
-  border-top: 1px solid var(--rim-light-bottom);
-  animation: ds-forgot-fade-in 0.5s ease-out 0.5s forwards;
-  opacity: 0;
+  align-items: center;
+  gap: var(--space-1);
+  padding: var(--space-1);
+  border-radius: var(--radius-badge);
+  background: var(--interactive-hover-bg);
+  border: 1px solid var(--rim-light-bottom);
 }
-.ds-forgot__back {
+.ds-color-picker__swatch {
   display: flex;
   align-items: center;
-  gap: var(--space-2);
-  padding: var(--space-2) var(--space-3);
+  justify-content: center;
+  padding: var(--space-1);
   border: none;
-  border-radius: var(--radius-button);
+  border-radius: var(--radius-xs);
   background: transparent;
-  color: var(--text-secondary);
-  font-family: var(--font-family);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
   cursor: pointer;
-  transition: color var(--transition-glass), background var(--transition-glass);
+  transition: background var(--transition-fast);
 }
-.ds-forgot__back:hover:not(:disabled) {
-  color: var(--text-primary);
-  background: var(--glass-base-hover);
+.ds-color-picker__swatch:hover {
+  background: var(--interactive-hover-bg);
 }
-.ds-forgot__back:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+.ds-color-picker__swatch--active {
+  background: var(--interactive-active-bg);
 }
-@media (max-width: 480px) {
-  .ds-forgot {
-    padding: var(--space-4);
-  }
-  .ds-forgot__card {
-    padding: var(--space-6);
-    border-radius: var(--radius-card);
-  }
-  .ds-forgot__accent--1 {
-    width: 200px;
-    height: 200px;
-    top: -50px;
-    right: -50px;
-  }
-  .ds-forgot__accent--2 {
-    width: 150px;
-    height: 150px;
-    bottom: -30px;
-    left: -30px;
-  }
+.ds-color-picker__dot {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--swatch-color);
+  border: 1.5px solid var(--rim-light-bottom);
+  transition: box-shadow var(--transition-fast);
 }
-@media (prefers-reduced-motion: reduce) {
-  .ds-forgot__card,
-  .ds-forgot__logo,
-  .ds-forgot__title,
-  .ds-forgot__tagline,
-  .ds-forgot__form,
-  .ds-forgot__footer,
-  .ds-forgot__success-icon {
-    animation: none;
-    opacity: 1;
-  }
-  .ds-forgot__accent {
-    animation: none;
-  }
-  .ds-forgot__spinner {
-    animation-duration: 1.5s;
-  }
+.ds-color-picker__swatch--active .ds-color-picker__dot {
+  box-shadow: 0 0 0 2px var(--swatch-color);
 }
-@media (prefers-contrast: more) {
-  .ds-forgot__card {
-    border: 1px solid var(--hc-border);
-  }
+.ds-color-picker__swatch--custom {
+  position: relative;
+}
+.ds-color-picker__native-input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+  border: none;
+  padding: 0;
 }
 
 /* src/styles/styles.css */
+@font-face {
+  font-family: Anton;
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../Anton-Regular-MLEXVTB2.woff2") format("woff2");
+  unicode-range:
+    U+0000-00FF,
+    U+0131,
+    U+0152-0153,
+    U+02BB-02BC,
+    U+02C6,
+    U+02DA,
+    U+02DC,
+    U+0304,
+    U+0308,
+    U+0329,
+    U+2000-206F,
+    U+20AC,
+    U+2122,
+    U+2191,
+    U+2193,
+    U+2212,
+    U+2215,
+    U+FEFF,
+    U+FFFD;
+}