@salesmind-ai/design-system 1.7.0 → 1.9.0

package/dist/styles/styles.css

@@ -2403,6 +2403,60 @@ a:hover {
     background: var(--fallback-surface);
   }
 }
+.ds-locale-dropdown__panel--searchable {
+  display: flex;
+  flex-direction: column;
+  min-width: 220px;
+}
+.ds-locale-dropdown__search {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-1-5) var(--space-2-5);
+  margin-bottom: var(--space-1);
+  border-radius: var(--radius-button);
+  background: var(--glass-base-hover);
+}
+.ds-locale-dropdown__search:focus-within {
+  box-shadow: var(--focus-ring);
+}
+.ds-locale-dropdown__search-icon {
+  display: flex;
+  align-items: center;
+  color: var(--text-tertiary);
+  flex-shrink: 0;
+}
+.ds-locale-dropdown__search-input {
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--text-primary);
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  line-height: 1;
+}
+.ds-locale-dropdown__search-input::placeholder {
+  color: var(--text-tertiary);
+}
+.ds-locale-dropdown__search-input:focus,
+.ds-locale-dropdown__search-input:focus-visible {
+  outline: none;
+}
+.ds-locale-dropdown__list {
+  display: flex;
+  flex-direction: column;
+  max-height: 280px;
+  overflow-y: auto;
+}
+.ds-locale-dropdown__empty {
+  padding: var(--space-3);
+  color: var(--text-tertiary);
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  text-align: center;
+}
 
 /* src/components/ThemeSelector/ThemeSelector.css */
 .ds-theme-selector {
@@ -2516,6 +2570,2545 @@ a:hover {
   padding: 0;
 }
 
+/* src/v2-auth/VoidBackground/VoidBackground.css */
+.void {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 100vh;
+  overflow: hidden;
+  isolation: isolate;
+}
+.void__base {
+  background-color: var(--void-base);
+  z-index: -4;
+}
+.void__base,
+.void__orbs {
+  position: absolute;
+  inset: 0;
+}
+.void__orbs {
+  z-index: -3;
+  pointer-events: none;
+}
+.void__orb {
+  position: absolute;
+  border-radius: 50%;
+  mix-blend-mode: screen;
+  filter: blur(140px);
+  opacity: .6;
+}
+.void__orb--warm {
+  width: 800px;
+  height: 800px;
+  top: 10%;
+  right: 10%;
+  background:
+    radial-gradient(
+      circle at center,
+      rgba(var(--void-orb-yellow-rgb), .4) 0,
+      rgba(var(--void-orb-pink-rgb), .3) 40%,
+      transparent 70%);
+}
+.void__orb--purple {
+  width: 600px;
+  height: 600px;
+  bottom: 10%;
+  left: 10%;
+  background:
+    radial-gradient(
+      circle at center,
+      rgba(var(--void-orb-purple-rgb), .5) 0,
+      rgba(var(--void-orb-purple-rgb), .2) 50%,
+      transparent 70%);
+}
+.void__grid {
+  z-index: -2;
+  background-image:
+    linear-gradient(
+      to right,
+      var(--void-grid-color) 1px,
+      transparent 1px),
+    linear-gradient(
+      to bottom,
+      var(--void-grid-color) 1px,
+      transparent 1px);
+  background-size: var(--void-grid-size) var(--void-grid-size);
+  mask-image:
+    radial-gradient(
+      ellipse 70% 60% at 50% 40%,
+      #000 0,
+      transparent 100%);
+  -webkit-mask-image:
+    radial-gradient(
+      ellipse 70% 60% at 50% 40%,
+      #000 0,
+      transparent 100%);
+}
+.void__grain,
+.void__grid {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+.void__grain {
+  z-index: -1;
+  opacity: var(--void-grid-grain-opacity,.04);
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
+  background-repeat: repeat;
+  background-size: 200px 200px;
+}
+.void__content {
+  position: relative;
+  z-index: 1;
+  flex: 1 1;
+  display: flex;
+  flex-direction: column;
+}
+.void--inline,
+.void--inline .void__content {
+  min-height: auto;
+}
+@media (prefers-reduced-motion:reduce) {
+  .void__orb {
+    animation: none;
+  }
+}
+.void__content .ds-change-email {
+  min-height: auto;
+  flex: 1 1;
+}
+
+/* src/v2-auth/Button/Button.css */
+.ds-button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  border: none;
+  cursor: pointer;
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-medium);
+  border-radius: var(--radius-button);
+  color: var(--text-primary);
+  outline: none;
+  white-space: nowrap;
+  hyphens: none;
+  word-break: normal;
+  overflow-wrap: normal;
+  backdrop-filter: blur(12px) saturate(140%);
+  -webkit-backdrop-filter: blur(12px) saturate(140%);
+  transition:
+    background var(--transition-glass),
+    box-shadow var(--transition-glass),
+    transform var(--transition-glass);
+}
+.ds-button::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;
+  transition: background var(--transition-glass);
+}
+.ds-button:focus-visible {
+  box-shadow: var(--focus-ring);
+}
+.ds-button:disabled {
+  opacity: .4;
+  cursor: not-allowed;
+  transform: none !important;
+}
+.ds-button--primary {
+  background: var(--btn-primary-bg);
+  color: var(--btn-primary-text,#fff);
+  box-shadow:
+    var(--shadow-interactive-rest),
+    var(--glass-shadow-inner),
+    var(--btn-primary-glow);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+.ds-button--primary::before {
+  background:
+    linear-gradient(
+      180deg,
+      var(--glass-highlight-strong) 0,
+      rgba(var(--brand-pink-rgb), .2) 100%);
+}
+.ds-button--primary:hover:not(:disabled) {
+  background: var(--btn-primary-bg-hover);
+  box-shadow:
+    var(--shadow-interactive-hover),
+    var(--glass-shadow-inner),
+    var(--btn-primary-glow-hover);
+  transform: translateY(-1px);
+}
+.ds-button--primary:hover:not(:disabled)::before {
+  background:
+    linear-gradient(
+      180deg,
+      var(--glass-highlight-bright) 0,
+      rgba(var(--brand-pink-rgb), .25) 100%);
+}
+.ds-button--primary:active:not(:disabled) {
+  transform: translateY(0);
+  box-shadow:
+    var(--shadow-interactive-active),
+    var(--glass-shadow-inner),
+    var(--btn-primary-glow);
+}
+.ds-button--secondary {
+  background: var(--btn-secondary-bg);
+  box-shadow: var(--shadow-interactive-rest-subtle), var(--glass-shadow-inner);
+}
+.ds-button--secondary:hover:not(:disabled) {
+  background: var(--btn-secondary-bg-hover);
+  box-shadow: var(--shadow-interactive-hover-subtle), var(--glass-shadow-inner);
+  transform: translateY(-1px);
+}
+.ds-button--secondary:hover:not(:disabled)::before {
+  background:
+    linear-gradient(
+      180deg,
+      var(--rim-light-hover-top) 0,
+      var(--rim-light-hover-bottom) 100%);
+}
+.ds-button--secondary:active:not(:disabled) {
+  transform: translateY(0);
+  background: var(--glass-base-active);
+}
+.ds-button--outline {
+  background: transparent;
+  box-shadow: none;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  color: var(--text-secondary);
+  transition:
+    background var(--transition-glass),
+    color var(--transition-glass),
+    box-shadow var(--transition-glass),
+    transform var(--transition-glass);
+}
+.ds-button--outline::before {
+  background:
+    linear-gradient(
+      180deg,
+      var(--outline-rim-top) 0,
+      var(--outline-rim-bottom) 100%);
+}
+.ds-button--outline:hover:not(:disabled) {
+  background: rgba(var(--brand-pink-rgb), .05);
+  color: var(--text-primary);
+  backdrop-filter: blur(12px) saturate(140%);
+  -webkit-backdrop-filter: blur(12px) saturate(140%);
+  box-shadow:
+    var(--shadow-interactive-rest-light),
+    var(--glass-shadow-inner),
+    0 0 16px rgba(var(--brand-pink-rgb), .1);
+  transform: translateY(-1px);
+}
+.ds-button--outline:hover:not(:disabled)::before {
+  background:
+    linear-gradient(
+      180deg,
+      rgba(var(--brand-pink-rgb), .3) 0,
+      rgba(var(--brand-pink-rgb), .1) 100%);
+}
+.ds-button--outline:active:not(:disabled) {
+  transform: translateY(0);
+  background: rgba(var(--brand-pink-rgb), .1);
+}
+.ds-button--ghost {
+  background: transparent;
+  box-shadow: none;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  color: var(--text-secondary);
+}
+.ds-button--ghost::before {
+  display: none;
+}
+.ds-button--ghost:hover:not(:disabled) {
+  background: var(--interactive-hover-bg);
+  color: var(--text-primary);
+}
+.ds-button--ghost:active:not(:disabled) {
+  background: var(--interactive-active-bg);
+}
+.ds-button--link {
+  background: transparent;
+  box-shadow: none;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  color: var(--brand-pink);
+  text-underline-offset: 4px;
+  height: auto;
+  padding: 0;
+}
+.ds-button--link::before {
+  display: none;
+}
+.ds-button--link:hover:not(:disabled) {
+  text-decoration: underline;
+}
+.ds-button--link:active:not(:disabled) {
+  opacity: .8;
+}
+.ds-button--destructive {
+  background: var(--btn-destructive-bg,rgba(var(--status-error-rgb,239,68,68),.6));
+  color: var(--btn-destructive-text,#fff);
+  box-shadow:
+    var(--shadow-interactive-rest),
+    var(--glass-shadow-inner),
+    0 0 20px rgba(var(--status-error-rgb,239,68,68), .15);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+.ds-button--destructive::before {
+  background:
+    linear-gradient(
+      180deg,
+      var(--glass-highlight-medium) 0,
+      rgba(var(--status-error-rgb,239,68,68), .15) 100%);
+}
+.ds-button--destructive:hover:not(:disabled) {
+  background: var(--btn-destructive-bg-hover,rgba(var(--status-error-rgb,239,68,68),.75));
+  box-shadow:
+    var(--shadow-interactive-hover),
+    var(--glass-shadow-inner),
+    0 0 24px rgba(var(--status-error-rgb,239,68,68), .25);
+  transform: translateY(-1px);
+}
+.ds-button--destructive:hover:not(:disabled)::before {
+  background:
+    linear-gradient(
+      180deg,
+      var(--glass-highlight-strong) 0,
+      rgba(var(--status-error-rgb,239,68,68), .2) 100%);
+}
+.ds-button--destructive:active:not(:disabled) {
+  transform: translateY(0);
+  background: var(--btn-destructive-bg-active,rgba(var(--status-error-rgb,239,68,68),.85));
+}
+.ds-button--sm {
+  font-size: var(--font-size-sm);
+  padding: var(--space-2) var(--space-4);
+  height: 2rem;
+}
+.ds-button--md {
+  font-size: var(--font-size-base);
+  padding: var(--space-2) var(--space-5);
+  height: 2.5rem;
+}
+.ds-button--lg {
+  font-size: var(--font-size-lg);
+  padding: var(--space-3) var(--space-6);
+  height: 3rem;
+}
+.ds-button--icon {
+  padding: 0;
+  aspect-ratio: 1;
+}
+.ds-button--icon.ds-button--sm {
+  width: 2rem;
+}
+.ds-button--icon.ds-button--md {
+  width: 2.5rem;
+}
+.ds-button--icon.ds-button--lg {
+  width: 3rem;
+}
+@media (prefers-contrast:more) {
+  .ds-button {
+    border: 1px solid var(--hc-border);
+  }
+  .ds-button::before {
+    display: none;
+  }
+  .ds-button--primary {
+    background: rgba(var(--brand-pink-rgb), .8);
+  }
+  .ds-button--secondary {
+    background: var(--hc-surface-subtle);
+  }
+  .ds-button--ghost {
+    border-color: transparent;
+  }
+  .ds-button--ghost:hover:not(:disabled) {
+    border-color: var(--hc-border-subtle);
+  }
+  .ds-button--link {
+    border: none;
+    text-decoration: underline;
+  }
+  .ds-button--destructive {
+    background: rgba(var(--status-error-rgb,239,68,68), .85);
+  }
+}
+@supports not (backdrop-filter:blur(1px)) {
+  .ds-button--primary {
+    background: rgba(var(--brand-pink-rgb), .85);
+  }
+  .ds-button--secondary {
+    background: var(--fallback-surface);
+  }
+}
+:root[data-theme=light-contrast] .ds-button--primary::before,
+:root[data-theme=light] .ds-button--primary::before {
+  background:
+    linear-gradient(
+      180deg,
+      var(--glass-highlight-light) 0,
+      rgba(var(--brand-pink-rgb), .08) 100%);
+}
+:root[data-theme=light-contrast] .ds-button--primary:hover:not(:disabled)::before,
+:root[data-theme=light] .ds-button--primary:hover:not(:disabled)::before {
+  background:
+    linear-gradient(
+      180deg,
+      var(--glass-highlight-medium) 0,
+      rgba(var(--brand-pink-rgb), .1) 100%);
+}
+:root[data-theme=light-contrast] .ds-button--destructive::before,
+:root[data-theme=light] .ds-button--destructive::before {
+  background:
+    linear-gradient(
+      180deg,
+      var(--glass-highlight-light) 0,
+      rgba(var(--status-error-rgb,239,68,68), .06) 100%);
+}
+:root[data-theme=light-contrast] .ds-button--destructive:hover:not(:disabled)::before,
+:root[data-theme=light] .ds-button--destructive:hover:not(:disabled)::before {
+  background:
+    linear-gradient(
+      180deg,
+      var(--glass-highlight-light) 0,
+      rgba(var(--status-error-rgb,239,68,68), .08) 100%);
+}
+.ds-button--loading {
+  position: relative;
+  cursor: not-allowed;
+  opacity: .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 {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(1turn);
+  }
+}
+
+/* src/v2-auth/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);
+  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);
+}
+.ds-textfield__input::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-textfield__input-wrapper {
+  position: relative;
+}
+.ds-textfield__input-wrapper::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: var(--radius-button);
+  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;
+  transition: background var(--transition-glass);
+}
+.ds-textfield__input::placeholder {
+  color: var(--text-tertiary);
+}
+.ds-textfield__input::placeholder {
+  color: var(--text-tertiary);
+}
+.ds-textfield__input:hover:not(:disabled):not(:focus) {
+  background: var(--glass-base-hover);
+}
+.ds-textfield__input-wrapper:hover:not(:has(:disabled)):not(:has(:focus))::before {
+  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);
+  box-shadow:
+    var(--shadow-lg),
+    var(--glass-shadow-inner),
+    0 0 0 2px rgba(var(--brand-pink-rgb), .3);
+}
+.ds-textfield__input-wrapper:has(:focus)::before {
+  background:
+    linear-gradient(
+      180deg,
+      rgba(var(--brand-pink-rgb), .4) 0,
+      rgba(var(--brand-pink-rgb), .1) 100%);
+}
+.ds-textfield__input:disabled {
+  opacity: .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;
+}
+.ds-textfield__input--error {
+  box-shadow:
+    var(--shadow-md),
+    var(--shadow-inset-border-error),
+    0 0 0 1px rgba(var(--status-error-rgb), .5);
+}
+.ds-textfield__input-wrapper:has(.ds-textfield__input--error)::before {
+  background:
+    linear-gradient(
+      180deg,
+      rgba(var(--status-error-rgb), .4) 0,
+      rgba(var(--status-error-rgb), .1) 100%);
+}
+.ds-textfield__input--error:focus {
+  box-shadow:
+    var(--shadow-lg),
+    var(--glass-shadow-inner),
+    0 0 0 2px rgba(var(--status-error-rgb), .4);
+}
+.ds-textfield__helper {
+  font-family: var(--font-family);
+  font-size: var(--font-size-xs);
+  color: var(--text-tertiary);
+}
+.ds-textfield__helper--error {
+  color: var(--status-error);
+}
+@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);
+  }
+}
+@supports not (backdrop-filter:blur(1px)) {
+  .ds-textfield__input {
+    background: var(--fallback-surface);
+  }
+}
+.ds-signup__phone-container,
+.ds-signup__phone-container.ds-textfield__input {
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+}
+.ds-signup__phone-container.ds-textfield__input {
+  padding: 0;
+  overflow: hidden;
+}
+.ds-signup__password-wrapper .ds-textfield__input {
+  padding-right: var(--space-12);
+}
+.ds-forgot__password-wrapper .ds-textfield__input {
+  padding-right: var(--space-12);
+}
+
+/* src/v2-auth/Checkbox/Checkbox.css */
+.ds-checkbox-wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+.ds-checkbox {
+  all: unset;
+  position: relative;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: var(--radius-badge);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  flex-shrink: 0;
+  background: var(--glass-base);
+  backdrop-filter: blur(12px) saturate(140%);
+  -webkit-backdrop-filter: blur(12px) saturate(140%);
+  box-shadow: var(--shadow-sm), var(--shadow-inset-border-error);
+  transition:
+    background var(--transition-glass),
+    box-shadow var(--transition-glass),
+    transform var(--transition-glass);
+}
+.ds-checkbox::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;
+  transition: background var(--transition-glass);
+}
+.ds-checkbox:hover:not([disabled]) {
+  background: var(--glass-base-hover);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md), var(--glass-shadow-inner);
+}
+.ds-checkbox:hover:not([disabled])::before {
+  background:
+    linear-gradient(
+      180deg,
+      var(--rim-light-hover-top) 0,
+      var(--rim-light-hover-bottom) 100%);
+}
+.ds-checkbox:focus-visible {
+  box-shadow: var(--focus-ring);
+}
+.ds-checkbox[data-state=checked] {
+  background: var(--btn-primary-bg);
+  box-shadow:
+    var(--shadow-sm),
+    var(--glass-shadow-inner),
+    var(--btn-primary-glow);
+}
+.ds-checkbox[data-state=checked]::before {
+  background:
+    linear-gradient(
+      180deg,
+      var(--glass-highlight-strong) 0,
+      rgba(var(--brand-pink-rgb), .2) 100%);
+}
+.ds-checkbox[data-state=checked]:hover:not([disabled]) {
+  background: var(--btn-primary-bg-hover);
+  box-shadow:
+    var(--shadow-md),
+    var(--glass-highlight-medium),
+    var(--btn-primary-glow-hover);
+}
+.ds-checkbox[disabled] {
+  opacity: .4;
+  cursor: not-allowed;
+  transform: none !important;
+}
+.ds-checkbox__indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: var(--text-primary);
+  position: relative;
+  z-index: 1;
+}
+.ds-checkbox__icon {
+  width: .75rem;
+  height: .75rem;
+  animation: ds-checkbox-check-in .15s ease-out;
+}
+@keyframes ds-checkbox-check-in {
+  0% {
+    opacity: 0;
+    transform: scale(.8);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+.ds-checkbox__label {
+  font-family: var(--font-family);
+  font-size: var(--font-size-base);
+  color: var(--text-primary);
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  line-height: var(--line-height-normal);
+}
+.ds-checkbox-wrapper:has(.ds-checkbox[disabled]) .ds-checkbox__label,
+.ds-checkbox[disabled] + .ds-checkbox__label {
+  opacity: .4;
+  cursor: not-allowed;
+}
+@media (prefers-contrast:more) {
+  .ds-checkbox {
+    background: var(--hc-surface-input);
+    border: 1px solid var(--hc-border-strong);
+  }
+  .ds-checkbox::before {
+    display: none;
+  }
+  .ds-checkbox[data-state=checked] {
+    background: rgba(var(--brand-pink-rgb), .8);
+    border-color: var(--brand-pink);
+  }
+}
+@media (prefers-reduced-motion:reduce) {
+  .ds-checkbox__icon {
+    animation: none;
+  }
+}
+
+/* src/v2-auth/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: .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), .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), .3) 0,
+      transparent 70%);
+  bottom: -50px;
+  left: -50px;
+  animation-delay: -10s;
+}
+@keyframes ds-login-float {
+  0%, 100% {
+    transform: translate(0) scale(1);
+  }
+  25% {
+    transform: translate(20px, -30px) scale(1.05);
+  }
+  50% {
+    transform: translate(-10px, 20px) scale(.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 .6s cubic-bezier(.16, 1, .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 .5s ease-out .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), .3));
+}
+@keyframes ds-login-logo-pulse {
+  0%, 100% {
+    transform: scale(1);
+    filter: drop-shadow(0 4px 12px rgba(var(--accent-rgb), .3));
+  }
+  50% {
+    transform: scale(1.05);
+    filter: drop-shadow(0 6px 20px rgba(var(--accent-rgb), .5));
+  }
+}
+.ds-login__title {
+  animation: ds-login-fade-in .5s ease-out .2s forwards;
+}
+.ds-login__tagline,
+.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);
+  opacity: 0;
+}
+.ds-login__tagline {
+  line-height: var(--line-height-normal);
+  animation: ds-login-fade-in .5s ease-out .3s forwards;
+}
+@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), .1);
+  border: 1px solid rgba(var(--status-error-rgb), .3);
+  color: var(--status-error);
+  font-size: var(--font-size-sm);
+  animation: ds-login-error-enter .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 .5s ease-out .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: .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::after,
+.ds-login__divider::before {
+  content: "";
+  flex: 1 1;
+  height: 1px;
+  background:
+    linear-gradient(
+      90deg,
+      transparent 0,
+      var(--rim-light-top) 50%,
+      transparent 100%);
+}
+.ds-login__form {
+  animation: ds-login-fade-in .5s ease-out .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: .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 .8s linear infinite;
+}
+@keyframes ds-login-spin {
+  to {
+    transform: rotate(1turn);
+  }
+}
+.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 .5s ease-out .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__footer,
+  .ds-login__form,
+  .ds-login__logo,
+  .ds-login__social,
+  .ds-login__tagline,
+  .ds-login__title,
+  .ds-login__trust {
+    animation: none;
+    opacity: 1;
+  }
+  .ds-login__accent,
+  .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/v2-auth/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: .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), .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), .3) 0,
+      transparent 70%);
+  bottom: -50px;
+  left: -50px;
+  animation-delay: -10s;
+}
+@keyframes ds-signup-float {
+  0%, 100% {
+    transform: translate(0) scale(1);
+  }
+  25% {
+    transform: translate(20px, -30px) scale(1.05);
+  }
+  50% {
+    transform: translate(-10px, 20px) scale(.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 .6s cubic-bezier(.16, 1, .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 .6s cubic-bezier(.16, 1, .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 .5s ease-out .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), .3));
+}
+@keyframes ds-signup-logo-pulse {
+  0%, 100% {
+    transform: scale(1);
+    filter: drop-shadow(0 4px 12px rgba(var(--accent-rgb), .3));
+  }
+  50% {
+    transform: scale(1.05);
+    filter: drop-shadow(0 6px 20px rgba(var(--accent-rgb), .5));
+  }
+}
+.ds-signup__title {
+  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 .5s ease-out .2s forwards;
+}
+.ds-signup__tagline,
+.ds-signup__title {
+  font-family: var(--font-family);
+  opacity: 0;
+}
+.ds-signup__tagline {
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+  margin: 0;
+  line-height: var(--line-height-normal);
+  animation: ds-signup-fade-in .5s ease-out .3s forwards;
+}
+@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), .1);
+  border: 1px solid rgba(var(--status-error-rgb), .3);
+  color: var(--status-error);
+  font-size: var(--font-size-sm);
+  animation: ds-signup-error-enter .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 .5s ease-out .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: .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::after,
+.ds-signup__divider::before {
+  content: "";
+  flex: 1 1;
+  height: 1px;
+  background:
+    linear-gradient(
+      90deg,
+      transparent 0,
+      var(--rim-light-top) 50%,
+      transparent 100%);
+}
+.ds-signup__form {
+  animation: ds-signup-fade-in .5s ease-out .5s forwards;
+  opacity: 0;
+}
+.ds-signup__field {
+  margin-bottom: var(--space-4);
+}
+.ds-signup__phone-container,
+.ds-signup__phone-container.ds-textfield__input {
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+}
+.ds-signup__phone-container.ds-textfield__input {
+  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-signup__phone-container:disabled,
+.ds-signup__phone-input-native:disabled {
+  opacity: .5;
+  cursor: not-allowed;
+}
+.ds-signup__password-wrapper {
+  position: relative;
+}
+.ds-signup__password-wrapper .ds-textfield__input {
+  padding-right: var(--space-12);
+}
+.ds-signup__password-toggle {
+  position: absolute;
+  right: var(--space-3);
+  top: 60%;
+  transform: translateY(calc(-50% + 10px));
+  padding: var(--space-2);
+  border: none;
+  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 1;
+}
+.ds-signup__strength-segment {
+  height: 4px;
+  flex: 1 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 {
+  font-family: var(--font-family);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  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);
+}
+.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-signup__link:hover:not(:disabled) {
+  text-decoration: underline;
+}
+.ds-signup__link:disabled {
+  opacity: .5;
+  cursor: not-allowed;
+}
+.ds-signup__link--accent {
+  color: rgb(var(--accent-rgb));
+}
+.ds-signup__submit {
+  width: 100%;
+}
+.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 .8s linear infinite;
+}
+@keyframes ds-signup-spin {
+  to {
+    transform: rotate(1turn);
+  }
+}
+.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 .5s ease-out .6s forwards;
+  opacity: 0;
+}
+@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;
+  }
+}
+@media (prefers-reduced-motion:reduce) {
+  .ds-signup__card,
+  .ds-signup__footer,
+  .ds-signup__form,
+  .ds-signup__logo,
+  .ds-signup__social,
+  .ds-signup__success-icon,
+  .ds-signup__tagline,
+  .ds-signup__title,
+  .ds-signup__trust {
+    animation: none;
+    opacity: 1;
+  }
+  .ds-signup__accent,
+  .ds-signup__logo-icon {
+    animation: none;
+  }
+  .ds-signup__spinner {
+    animation-duration: 1.5s;
+  }
+}
+@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;
+  }
+}
+
+/* src/v2-auth/ForgotPassword/ForgotPassword.css */
+.ds-forgot {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-6);
+}
+.ds-forgot__accent {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: .5;
+  pointer-events: none;
+  animation: ds-forgot-float 20s ease-in-out infinite;
+}
+.ds-forgot__accent--1 {
+  width: 400px;
+  height: 400px;
+  background:
+    radial-gradient(
+      circle,
+      rgba(var(--accent-rgb), .4) 0,
+      transparent 70%);
+  top: -100px;
+  right: -100px;
+  animation-delay: 0s;
+}
+.ds-forgot__accent--2 {
+  width: 300px;
+  height: 300px;
+  background:
+    radial-gradient(
+      circle,
+      rgba(var(--accent2-rgb), .3) 0,
+      transparent 70%);
+  bottom: -50px;
+  left: -50px;
+  animation-delay: -10s;
+}
+@keyframes ds-forgot-float {
+  0%, 100% {
+    transform: translate(0) scale(1);
+  }
+  25% {
+    transform: translate(20px, -30px) scale(1.05);
+  }
+  50% {
+    transform: translate(-10px, 20px) scale(.95);
+  }
+  75% {
+    transform: translate(-30px, -10px) scale(1.02);
+  }
+}
+.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 .6s cubic-bezier(.16, 1, .3, 1) forwards;
+  opacity: 0;
+  transform: translateY(20px);
+}
+.ds-forgot__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;
+}
+.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);
+}
+.ds-forgot__logo {
+  display: flex;
+  justify-content: center;
+  margin-bottom: var(--space-4);
+  animation: ds-forgot-fade-in .5s ease-out .1s forwards;
+  opacity: 0;
+}
+.ds-forgot__logo-icon {
+  width: 56px;
+  height: 56px;
+}
+.ds-forgot__logo-icon svg {
+  width: 100%;
+  height: 100%;
+  filter: drop-shadow(0 4px 12px rgba(var(--accent-rgb), .3));
+}
+.ds-forgot__title {
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--text-primary);
+  margin: 0 0 var(--space-2);
+  animation: ds-forgot-fade-in .5s ease-out .2s forwards;
+}
+.ds-forgot__tagline,
+.ds-forgot__title {
+  font-family: var(--font-family);
+  opacity: 0;
+}
+.ds-forgot__tagline {
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+  margin: 0;
+  line-height: var(--line-height-normal);
+  animation: ds-forgot-fade-in .5s ease-out .3s forwards;
+}
+.ds-forgot__tagline strong {
+  color: var(--text-primary);
+}
+@keyframes ds-forgot-fade-in {
+  to {
+    opacity: 1;
+  }
+}
+.ds-forgot__success-icon {
+  width: 64px;
+  height: 64px;
+  margin: 0 auto var(--space-6);
+  animation: ds-forgot-success-icon .6s cubic-bezier(.16, 1, .3, 1) forwards;
+}
+.ds-forgot__success-icon svg {
+  width: 100%;
+  height: 100%;
+}
+@keyframes ds-forgot-success-icon {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+.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), .1);
+  border: 1px solid rgba(var(--status-error-rgb), .3);
+  color: var(--status-error);
+  font-size: var(--font-size-sm);
+  animation: ds-forgot-error-enter .4s ease-out;
+}
+@keyframes ds-forgot-error-enter {
+  0% {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  50% {
+    transform: translateX(5px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+.ds-forgot__form {
+  animation: ds-forgot-fade-in .5s ease-out .4s forwards;
+  opacity: 0;
+}
+.ds-forgot__field {
+  margin-bottom: var(--space-4);
+}
+.ds-forgot__password-wrapper {
+  position: relative;
+}
+.ds-forgot__password-wrapper .ds-textfield__input {
+  padding-right: var(--space-12);
+}
+.ds-forgot__password-toggle {
+  position: absolute;
+  right: var(--space-3);
+  top: 60%;
+  transform: translateY(calc(-50% + 10px));
+  padding: var(--space-2);
+  border: none;
+  background: transparent;
+  color: var(--text-tertiary);
+  cursor: pointer;
+  border-radius: var(--radius-badge);
+  transition: color var(--transition-glass), background var(--transition-glass);
+}
+.ds-forgot__password-toggle: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: 2px solid #fff;
+  border-radius: 50%;
+  animation: ds-forgot-spin .8s linear infinite;
+}
+@keyframes ds-forgot-spin {
+  to {
+    transform: rotate(1turn);
+  }
+}
+.ds-forgot__hint {
+  margin-top: var(--space-6);
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  color: var(--text-tertiary);
+}
+.ds-forgot__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);
+  margin-left: var(--space-1);
+}
+.ds-forgot__link:hover:not(:disabled) {
+  text-decoration: underline;
+}
+.ds-forgot__link:disabled {
+  opacity: .5;
+  cursor: not-allowed;
+}
+.ds-forgot__footer {
+  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 .5s ease-out .5s forwards;
+  opacity: 0;
+}
+.ds-forgot__back {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  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-medium);
+  cursor: pointer;
+  transition: color var(--transition-glass), background var(--transition-glass);
+}
+.ds-forgot__back:hover:not(:disabled) {
+  color: var(--text-primary);
+  background: var(--glass-base-hover);
+}
+.ds-forgot__back:disabled {
+  opacity: .5;
+  cursor: not-allowed;
+}
+@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;
+  }
+}
+@media (prefers-reduced-motion:reduce) {
+  .ds-forgot__card,
+  .ds-forgot__footer,
+  .ds-forgot__form,
+  .ds-forgot__logo,
+  .ds-forgot__success-icon,
+  .ds-forgot__tagline,
+  .ds-forgot__title {
+    animation: none;
+    opacity: 1;
+  }
+  .ds-forgot__accent {
+    animation: none;
+  }
+  .ds-forgot__spinner {
+    animation-duration: 1.5s;
+  }
+}
+@media (prefers-contrast:more) {
+  .ds-forgot__card {
+    border: 1px solid var(--hc-border);
+  }
+}
+
+/* src/v2-auth/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 1;
+}
+.ds-change-email__accent {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: .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), .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), .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) scale(1);
+  }
+  25% {
+    transform: translate(20px, -30px) scale(1.05);
+  }
+  50% {
+    transform: translate(-10px, 20px) scale(.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 .6s cubic-bezier(.16, 1, .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 .5s ease-out .1s forwards;
+  opacity: 0;
+}
+.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), .3));
+}
+@keyframes ds-change-email-logo-pulse {
+  0%, 100% {
+    transform: scale(1);
+    filter: drop-shadow(0 4px 12px rgba(var(--accent-rgb), .3));
+  }
+  50% {
+    transform: scale(1.05);
+    filter: drop-shadow(0 6px 20px rgba(var(--accent-rgb), .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 .5s ease-out .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 .5s ease-out .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), .1);
+  border: 1px solid rgba(var(--status-error-rgb), .3);
+  color: var(--status-error);
+  font-size: var(--font-size-sm);
+  animation: ds-change-email-error-enter .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 .5s ease-out .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,.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: .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::after,
+.ds-change-email__divider::before {
+  content: "";
+  flex: 1 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 .5s ease-out .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: .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,hsla(0deg,0%,100%,.3));
+  border-top-color: var(--text-primary,#fff);
+  border-radius: 50%;
+  animation: ds-change-email-spin .8s linear infinite;
+}
+@keyframes ds-change-email-spin {
+  to {
+    transform: rotate(1turn);
+  }
+}
+.ds-change-email__footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  margin-top: var(--space-6);
+  border-top: 1px solid var(--rim-light-bottom);
+  font-size: var(--font-size-sm);
+  animation: ds-change-email-fade-in .5s ease-out .6s forwards;
+}
+.ds-change-email__footer,
+.ds-change-email__trust {
+  padding-top: var(--space-6);
+  font-family: var(--font-family);
+  color: var(--text-tertiary);
+  opacity: 0;
+}
+.ds-change-email__trust {
+  padding-bottom: var(--space-2);
+  text-align: center;
+  font-size: var(--font-size-xs);
+  animation: ds-change-email-fade-in .5s ease-out .7s forwards;
+}
+@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__footer,
+  .ds-change-email__form,
+  .ds-change-email__logo,
+  .ds-change-email__social,
+  .ds-change-email__tagline,
+  .ds-change-email__title,
+  .ds-change-email__trust {
+    animation: none;
+    opacity: 1;
+  }
+  .ds-change-email__accent,
+  .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/v2-auth/helpers.css */
+.ds-login,
+.ds-signup,
+.ds-forgot,
+.ds-change-email {
+  --void-grid-size: 80px;
+}
+.ds-login,
+.ds-login *,
+.ds-login *::before,
+.ds-login *::after,
+.ds-signup,
+.ds-signup *,
+.ds-signup *::before,
+.ds-signup *::after,
+.ds-forgot,
+.ds-forgot *,
+.ds-forgot *::before,
+.ds-forgot *::after,
+.ds-change-email,
+.ds-change-email *,
+.ds-change-email *::before,
+.ds-change-email *::after {
+  box-sizing: border-box;
+}
+.ds-login__logo svg,
+.ds-signup__logo svg,
+.ds-forgot__logo svg,
+.ds-change-email__logo svg {
+  height: 40px;
+  width: auto;
+  display: block;
+}
+.ds-login input:-webkit-autofill,
+.ds-login input:-webkit-autofill:hover,
+.ds-login input:-webkit-autofill:focus,
+.ds-login input:-webkit-autofill:active,
+.ds-signup input:-webkit-autofill,
+.ds-signup input:-webkit-autofill:hover,
+.ds-signup input:-webkit-autofill:focus,
+.ds-signup input:-webkit-autofill:active,
+.ds-forgot input:-webkit-autofill,
+.ds-forgot input:-webkit-autofill:hover,
+.ds-forgot input:-webkit-autofill:focus,
+.ds-forgot input:-webkit-autofill:active,
+.ds-change-email input:-webkit-autofill,
+.ds-change-email input:-webkit-autofill:hover,
+.ds-change-email input:-webkit-autofill:focus,
+.ds-change-email input:-webkit-autofill:active {
+  -webkit-text-fill-color: var(--text-primary) !important;
+  caret-color: var(--text-primary);
+  -webkit-box-shadow: 0 0 0 1000px var(--glass-base-active, var(--glass-base)) inset !important;
+  box-shadow: 0 0 0 1000px var(--glass-base-active, var(--glass-base)) inset !important;
+  transition: background-color 100000s ease-in-out 0s;
+}
+
 /* src/styles/styles.css */
 @font-face {
   font-family: Anton;