@salesmind-ai/design-system 0.2.1 → 0.3.1

package/dist/admin/index.css

@@ -0,0 +1,4145 @@
+/* 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:hover {
+  background: var(--surface-alpha-3);
+}
+.ds-sidebar__section {
+  margin-bottom: var(--space-4);
+}
+.ds-sidebar__section:last-child {
+  margin-bottom: 0;
+}
+.ds-sidebar__section-title {
+  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: 0 0 var(--space-2) var(--space-3);
+}
+.ds-sidebar__item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  width: 100%;
+  padding: var(--space-3) 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-base);
+  font-weight: var(--font-weight-medium);
+  text-align: left;
+  cursor: pointer;
+  position: relative;
+  transition:
+    background var(--transition-glass),
+    color var(--transition-glass),
+    box-shadow var(--transition-glass);
+}
+.ds-sidebar__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-sidebar__item:hover {
+  background: var(--glass-base-hover);
+  color: var(--text-primary);
+}
+.ds-sidebar__item:hover::before {
+  opacity: 1;
+}
+.ds-sidebar__item:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+.ds-sidebar__item--active {
+  background: rgba(var(--brand-pink-rgb), 0.15);
+  color: var(--text-primary);
+  box-shadow: var(--glass-shadow-inner), 0 0 20px rgba(var(--brand-pink-rgb), 0.1);
+}
+.ds-sidebar__item--active::before {
+  opacity: 1;
+  background:
+    linear-gradient(
+      180deg,
+      rgba(var(--brand-pink-rgb), 0.3) 0%,
+      rgba(var(--brand-pink-rgb), 0.1) 100%);
+}
+.ds-sidebar__item-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+}
+.ds-sidebar__item-icon svg {
+  width: 100%;
+  height: 100%;
+}
+.ds-sidebar__item-label {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+@media (prefers-contrast: more) {
+  .ds-sidebar {
+    background: var(--hc-surface);
+    border: 1px solid var(--hc-border);
+  }
+  .ds-sidebar::before {
+    display: none;
+  }
+  .ds-sidebar__item--active {
+    background: rgba(var(--brand-pink-rgb), 0.3);
+    border: 1px solid rgba(var(--brand-pink-rgb), 0.5);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-sidebar {
+    transition: none;
+  }
+}
+@supports not (backdrop-filter: blur(1px)) {
+  .ds-sidebar {
+    background: var(--fallback-surface);
+  }
+}
+
+/* src/components/FloatingTabBar/FloatingTabBar.css */
+.ds-floating-tab-bar {
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  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-floating-tab-bar--top {
+  top: var(--float-distance);
+}
+.ds-floating-tab-bar--bottom {
+  bottom: var(--float-distance);
+}
+.ds-tab-item {
+  position: relative;
+  display: flex;
+  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/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/DataTable/DataTable.css */
+.ds-data-table-container {
+  width: 100%;
+  overflow: auto;
+  border-radius: var(--radius-card);
+  border: 1px solid var(--rim-light-bottom);
+  background: var(--glass-base);
+  backdrop-filter: var(--glass-backdrop);
+}
+.ds-data-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  color: var(--text-primary);
+}
+.ds-data-table__head {
+  padding: var(--space-3) var(--space-4);
+  text-align: left;
+  font-weight: var(--font-weight-medium);
+  color: var(--text-secondary);
+  border-bottom: 1px solid var(--rim-light-bottom);
+  background: var(--glass-base-hover);
+  white-space: nowrap;
+}
+.ds-data-table__row {
+  transition: background var(--transition-fast);
+}
+.ds-data-table__row:hover {
+  background: var(--glass-base-hover);
+}
+.ds-data-table__row:last-child .ds-data-table__cell {
+  border-bottom: none;
+}
+.ds-data-table__cell {
+  padding: var(--space-3) var(--space-4);
+  border-bottom: 1px solid var(--rim-light-bottom);
+  vertical-align: middle;
+}
+
+/* src/components/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: 0.4;
+  cursor: not-allowed;
+  transform: none !important;
+}
+.ds-button--primary {
+  background: var(--btn-primary-bg);
+  color: var(--btn-primary-text, #ffffff);
+  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), 0.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), 0.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), 0.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), 0.1);
+  transform: translateY(-1px);
+}
+.ds-button--outline:hover:not(:disabled)::before {
+  background:
+    linear-gradient(
+      180deg,
+      rgba(var(--brand-pink-rgb), 0.3) 0%,
+      rgba(var(--brand-pink-rgb), 0.1) 100%);
+}
+.ds-button--outline:active:not(:disabled) {
+  transform: translateY(0);
+  background: rgba(var(--brand-pink-rgb), 0.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: 0.8;
+}
+.ds-button--destructive {
+  background: var(--btn-destructive-bg, rgba(var(--status-error-rgb, 239, 68, 68), 0.6));
+  color: var(--btn-destructive-text, #ffffff);
+  box-shadow:
+    var(--shadow-interactive-rest),
+    var(--glass-shadow-inner),
+    0 0 20px rgba(var(--status-error-rgb, 239, 68, 68), 0.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), 0.15) 100%);
+}
+.ds-button--destructive:hover:not(:disabled) {
+  background: var(--btn-destructive-bg-hover, rgba(var(--status-error-rgb, 239, 68, 68), 0.75));
+  box-shadow:
+    var(--shadow-interactive-hover),
+    var(--glass-shadow-inner),
+    0 0 24px rgba(var(--status-error-rgb, 239, 68, 68), 0.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), 0.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), 0.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), 0.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), 0.85);
+  }
+}
+@supports not (backdrop-filter: blur(1px)) {
+  .ds-button--primary {
+    background: rgba(var(--brand-pink-rgb), 0.85);
+  }
+  .ds-button--secondary {
+    background: var(--fallback-surface);
+  }
+}
+:root[data-theme=light] .ds-button--primary::before,
+:root[data-theme=light-contrast] .ds-button--primary::before {
+  background:
+    linear-gradient(
+      180deg,
+      var(--glass-highlight-light) 0%,
+      rgba(var(--brand-pink-rgb), 0.08) 100%);
+}
+:root[data-theme=light] .ds-button--primary:hover:not(:disabled)::before,
+:root[data-theme=light-contrast] .ds-button--primary:hover:not(:disabled)::before {
+  background:
+    linear-gradient(
+      180deg,
+      var(--glass-highlight-medium) 0%,
+      rgba(var(--brand-pink-rgb), 0.1) 100%);
+}
+:root[data-theme=light] .ds-button--destructive::before,
+:root[data-theme=light-contrast] .ds-button--destructive::before {
+  background:
+    linear-gradient(
+      180deg,
+      var(--glass-highlight-light) 0%,
+      rgba(var(--status-error-rgb, 239, 68, 68), 0.06) 100%);
+}
+:root[data-theme=light] .ds-button--destructive:hover:not(:disabled)::before,
+:root[data-theme=light-contrast] .ds-button--destructive:hover:not(:disabled)::before {
+  background:
+    linear-gradient(
+      180deg,
+      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);
+  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: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), 0.3);
+}
+.ds-textfield__input-wrapper:has(:focus)::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;
+}
+.ds-textfield__input--error {
+  box-shadow:
+    var(--shadow-md),
+    var(--shadow-inset-border-error),
+    0 0 0 1px rgba(var(--status-error-rgb), 0.5);
+}
+.ds-textfield__input-wrapper:has(.ds-textfield__input--error)::before {
+  background:
+    linear-gradient(
+      180deg,
+      rgba(var(--status-error-rgb), 0.4) 0%,
+      rgba(var(--status-error-rgb), 0.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), 0.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);
+  }
+}
+
+/* src/components/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), 0.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: 0.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: 0.75rem;
+  height: 0.75rem;
+  animation: ds-checkbox-check-in 0.15s ease-out;
+}
+@keyframes ds-checkbox-check-in {
+  from {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  to {
+    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;
+  user-select: none;
+  line-height: var(--line-height-normal);
+}
+.ds-checkbox[disabled] + .ds-checkbox__label,
+.ds-checkbox-wrapper:has(.ds-checkbox[disabled]) .ds-checkbox__label {
+  opacity: 0.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), 0.8);
+    border-color: var(--brand-pink);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-checkbox__icon {
+    animation: none;
+  }
+}
+
+/* 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/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: 6px;
+  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: 18px;
+  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: 0.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;
+}
+.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 {
+  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: 0.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 0.8s linear infinite;
+}
+@keyframes ds-signup-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.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;
+  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__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;
+  }
+}
+@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/components/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: 0.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), 0.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), 0.3) 0%,
+      transparent 70%);
+  bottom: -50px;
+  left: -50px;
+  animation-delay: -10s;
+}
+@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-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-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 0.5s ease-out 0.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), 0.3));
+}
+.ds-forgot__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-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-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 0.6s cubic-bezier(0.16, 1, 0.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), 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;
+}
+@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 0.5s ease-out 0.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-color: white;
+  border-radius: 50%;
+  animation: ds-forgot-spin 0.8s linear infinite;
+}
+@keyframes ds-forgot-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.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: 3px;
+}
+.ds-forgot__link:hover:not(:disabled) {
+  text-decoration: underline;
+}
+.ds-forgot__link:disabled {
+  opacity: 0.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 0.5s ease-out 0.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: 0.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__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;
+  }
+}
+@media (prefers-contrast: more) {
+  .ds-forgot__card {
+    border: 1px solid var(--hc-border);
+  }
+}
+
+/* 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/LeadProfileView/LeadProfileView.css */
+.ds-lead-profile {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+  width: 100%;
+  max-width: 900px;
+  margin: 0 auto;
+  padding: var(--space-6);
+  color: var(--text-primary);
+  font-family: var(--font-family);
+}
+.ds-lead-profile__zone {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+  animation: ds-zone-enter var(--transition-slow) ease-out;
+  animation-fill-mode: both;
+}
+.ds-lead-profile__zone--identity {
+  animation-delay: 0ms;
+}
+.ds-lead-profile__zone--intelligence {
+  animation-delay: 100ms;
+}
+.ds-lead-profile__zone--deep-dive {
+  animation-delay: 200ms;
+}
+@keyframes ds-zone-enter {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.ds-lead-profile__card,
+.ds-lead-intelligence__card,
+.ds-deep-dive__card,
+.ds-mbti,
+.ds-behavioral {
+  background: var(--glass-base);
+  backdrop-filter: var(--glass-backdrop);
+  border: 1px solid var(--rim-light-bottom);
+  border-top-color: var(--rim-light-top);
+  border-radius: var(--radius-card);
+  padding: var(--space-6);
+  box-shadow: var(--glass-shadow-combined);
+  transition:
+    transform var(--transition-base),
+    box-shadow var(--transition-base),
+    background var(--transition-base);
+}
+.ds-lead-profile__card:hover,
+.ds-lead-intelligence__card:hover,
+.ds-deep-dive__card:hover {
+  transform: translateY(-2px);
+  background: var(--glass-base-hover);
+  box-shadow: var(--glass-shadow-elevated-combined);
+}
+.ds-lead-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: var(--space-16) var(--space-6);
+  min-height: 500px;
+  animation: ds-empty-enter 600ms ease-out;
+}
+@keyframes ds-empty-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+.ds-lead-empty__avatar-container {
+  position: relative;
+  margin-bottom: var(--space-8);
+}
+.ds-lead-empty__avatar {
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  background:
+    linear-gradient(
+      135deg,
+      rgba(var(--accent-rgb), 0.1) 0%,
+      rgba(var(--accent2-rgb), 0.1) 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+}
+.ds-lead-empty__avatar-pulse {
+  position: absolute;
+  inset: -10px;
+  border-radius: 50%;
+  background:
+    radial-gradient(
+      circle,
+      rgba(var(--accent-rgb), 0.2) 0%,
+      transparent 70%);
+  animation: ds-pulse 3s ease-in-out infinite;
+}
+@keyframes ds-pulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 0.8;
+  }
+}
+.ds-lead-empty__avatar-icon {
+  color: rgba(var(--accent-rgb), 0.6);
+  z-index: 1;
+}
+.ds-lead-empty__content {
+  max-width: 400px;
+  margin-bottom: var(--space-8);
+}
+.ds-lead-empty__title {
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+  margin: 0 0 var(--space-3);
+  letter-spacing: var(--letter-spacing-slightly-tight);
+}
+.ds-lead-empty__description {
+  font-size: var(--font-size-base);
+  color: var(--text-secondary);
+  line-height: var(--line-height-relaxed);
+  margin: 0;
+}
+.ds-lead-empty__action {
+  margin-bottom: var(--space-8);
+}
+.ds-lead-empty__trust {
+  display: flex;
+  gap: var(--space-6);
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.ds-lead-empty__trust-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--font-size-xs);
+  color: var(--text-tertiary);
+}
+.ds-lead-empty__trust-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--status-success);
+  opacity: 0.7;
+}
+.ds-lead-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: var(--space-16) var(--space-6);
+  min-height: 500px;
+  animation: ds-loading-enter 400ms ease-out;
+}
+@keyframes ds-loading-enter {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.ds-lead-loading__progress {
+  width: 100%;
+  max-width: 400px;
+  margin-bottom: var(--space-10);
+}
+.ds-lead-loading__progress-bar {
+  height: 4px;
+  background: var(--surface-alpha-2);
+  border-radius: var(--radius-pill);
+  overflow: hidden;
+  margin-bottom: var(--space-2);
+}
+.ds-lead-loading__progress-fill {
+  height: 100%;
+  background:
+    linear-gradient(
+      90deg,
+      rgb(var(--accent-rgb)),
+      rgb(var(--accent2-rgb)));
+  border-radius: var(--radius-pill);
+  transition: width 500ms ease-out;
+}
+.ds-lead-loading__progress-text {
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+  text-align: center;
+  display: block;
+}
+.ds-lead-loading__stages {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  width: 100%;
+  max-width: 320px;
+  margin-bottom: var(--space-10);
+}
+.ds-lead-loading__stage {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-button);
+  background: var(--glass-base-hover);
+  position: relative;
+  animation: ds-stage-enter 400ms ease-out;
+  animation-fill-mode: both;
+  animation-delay: calc(var(--stage-index) * 100ms);
+}
+@keyframes ds-stage-enter {
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+.ds-lead-loading__stage--pending {
+  opacity: 0.4;
+}
+.ds-lead-loading__stage--active {
+  background: rgba(var(--accent-rgb), 0.1);
+  border: 1px solid rgba(var(--accent-rgb), 0.2);
+}
+.ds-lead-loading__stage--completed {
+  opacity: 0.6;
+}
+.ds-lead-loading__stage--completed .ds-lead-loading__stage-icon {
+  color: var(--status-success);
+}
+.ds-lead-loading__stage-icon {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-tertiary);
+}
+.ds-lead-loading__stage--active .ds-lead-loading__stage-icon {
+  color: rgb(var(--accent-rgb));
+}
+.ds-lead-loading__stage-label {
+  flex: 1;
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+}
+.ds-lead-loading__stage--active .ds-lead-loading__stage-label {
+  color: var(--text-primary);
+  font-weight: var(--font-weight-medium);
+}
+.ds-lead-loading__stage-pulse {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: rgb(var(--accent-rgb));
+  animation: ds-pulse-small 1.5s ease-in-out infinite;
+}
+@keyframes ds-pulse-small {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.5;
+    transform: scale(0.8);
+  }
+}
+.ds-lead-loading__footer {
+  text-align: center;
+}
+.ds-lead-loading__time {
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+  margin: 0 0 var(--space-1);
+}
+.ds-lead-loading__message {
+  font-size: var(--font-size-xs);
+  color: var(--text-tertiary);
+  margin: 0;
+}
+.ds-lead-identity {
+  display: flex;
+  gap: var(--space-6);
+  align-items: flex-start;
+  background: var(--glass-base);
+  backdrop-filter: var(--glass-backdrop);
+  border: 1px solid var(--rim-light-bottom);
+  border-top-color: var(--rim-light-top);
+  border-radius: var(--radius-card);
+  padding: var(--space-6);
+  box-shadow: var(--glass-shadow-combined);
+}
+.ds-lead-identity__avatar-wrapper {
+  position: relative;
+  flex-shrink: 0;
+}
+.ds-lead-identity__avatar {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 3px solid var(--rim-light-top);
+  box-shadow: var(--shadow-inset-border-subtle), var(--shadow-interactive-rest);
+}
+.ds-lead-identity__verified-badge {
+  position: absolute;
+  bottom: 2px;
+  right: 2px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: var(--status-success);
+  color: var(--hc-control-knob);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid var(--void-base);
+}
+.ds-lead-identity__content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.ds-lead-identity__name-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+}
+.ds-lead-identity__name {
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--text-primary);
+  letter-spacing: var(--letter-spacing-tight);
+  margin: 0;
+  line-height: 1.2;
+}
+.ds-lead-identity__badges {
+  display: flex;
+  gap: var(--space-2);
+}
+.ds-lead-identity__badge {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--glass-highlight-subtle);
+  color: var(--text-secondary);
+  transition: all var(--transition-fast);
+  text-decoration: none;
+}
+.ds-lead-identity__badge:hover {
+  background: var(--glass-highlight-light);
+  color: var(--text-primary);
+}
+.ds-lead-identity__badge--linkedin:hover {
+  background: var(--social-linkedin-hover-bg);
+  color: var(--social-linkedin);
+}
+.ds-lead-identity__badge--verified {
+  background: rgba(var(--status-success-rgb, 34, 197, 94), 0.15);
+  color: var(--status-success);
+}
+.ds-lead-identity__role {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+  font-size: var(--font-size-base);
+}
+.ds-lead-identity__role-title {
+  color: var(--text-primary);
+  font-weight: var(--font-weight-medium);
+}
+.ds-lead-identity__role-separator {
+  color: var(--text-tertiary);
+}
+.ds-lead-identity__company {
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.ds-lead-identity__company-logo {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  object-fit: contain;
+}
+.ds-lead-identity__meta {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  color: var(--text-tertiary);
+  font-size: var(--font-size-sm);
+  flex-wrap: wrap;
+}
+.ds-lead-identity__meta-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+.ds-lead-identity__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  margin-top: var(--space-2);
+  flex-wrap: wrap;
+}
+.ds-lead-identity__contact {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-button);
+  background: var(--surface-alpha-1);
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+  text-decoration: none;
+  transition: all var(--transition-fast);
+}
+.ds-lead-identity__contact:hover {
+  background: var(--surface-alpha-2);
+  color: var(--text-primary);
+}
+.ds-lead-identity__contact--verified {
+  border: 1px solid rgba(var(--status-success-rgb, 34, 197, 94), 0.3);
+}
+.ds-lead-identity__contact--risky {
+  border: 1px solid rgba(var(--status-warning-rgb, 234, 179, 8), 0.3);
+}
+.ds-lead-identity__contact-email {
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ds-lead-identity__contact-status {
+  font-size: var(--font-size-xs);
+  padding: var(--space-0-5) var(--space-2);
+  border-radius: var(--radius-badge);
+  background: rgba(var(--status-success-rgb, 34, 197, 94), 0.15);
+  color: var(--status-success);
+}
+.ds-lead-identity__contact--risky .ds-lead-identity__contact-status {
+  background: rgba(var(--status-warning-rgb, 234, 179, 8), 0.15);
+  color: var(--status-warning);
+}
+.ds-lead-identity__freshness {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  font-size: var(--font-size-xs);
+  color: var(--text-tertiary);
+}
+.ds-lead-identity__confidence {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  margin-top: var(--space-2);
+}
+.ds-lead-identity__confidence-bar {
+  flex: 1;
+  max-width: 120px;
+  height: 4px;
+  background: var(--surface-alpha-2);
+  border-radius: var(--radius-pill);
+  overflow: hidden;
+}
+.ds-lead-identity__confidence-fill {
+  height: 100%;
+  background: var(--status-success);
+  border-radius: var(--radius-pill);
+  transition: width var(--transition-slow);
+}
+.ds-lead-identity__confidence-label {
+  font-size: var(--font-size-xs);
+  color: var(--text-tertiary);
+}
+.ds-lead-intelligence {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+.ds-lead-intelligence__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: var(--space-4);
+}
+.ds-lead-intelligence__card {
+  background: var(--glass-base);
+  backdrop-filter: var(--glass-backdrop);
+  border: 1px solid var(--rim-light-bottom);
+  border-top-color: var(--rim-light-top);
+  border-radius: var(--radius-card);
+  padding: var(--space-5);
+  box-shadow: var(--glass-shadow-combined);
+}
+.ds-lead-intelligence__card-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-bottom: var(--space-4);
+  color: var(--text-secondary);
+}
+.ds-lead-intelligence__card-title {
+  font-size: var(--font-size-xs);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-wide);
+  font-weight: var(--font-weight-semibold);
+}
+.ds-lead-intelligence__narrative {
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-relaxed);
+  color: var(--text-primary);
+  margin: 0;
+}
+.ds-lead-intelligence__mbti-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-top: var(--space-4);
+  padding: var(--space-2) var(--space-3);
+  background:
+    linear-gradient(
+      135deg,
+      rgba(var(--accent-rgb), 0.15) 0%,
+      rgba(var(--accent2-rgb), 0.15) 100%);
+  border-radius: var(--radius-button);
+  border: 1px solid rgba(var(--accent-rgb), 0.2);
+}
+.ds-lead-intelligence__mbti-type {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-bold);
+  color: var(--text-primary);
+  letter-spacing: var(--letter-spacing-wide);
+}
+.ds-lead-intelligence__mbti-label {
+  font-size: var(--font-size-xs);
+  color: var(--text-tertiary);
+}
+.ds-lead-intelligence__tips {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+.ds-lead-intelligence__tip {
+  display: flex;
+  gap: var(--space-3);
+  padding: var(--space-3);
+  background: var(--glass-base);
+  border-radius: var(--radius-button);
+  border-left: 3px solid transparent;
+}
+.ds-lead-intelligence__tip--do {
+  border-left-color: var(--status-success);
+}
+.ds-lead-intelligence__tip--dont {
+  border-left-color: var(--status-error);
+}
+.ds-lead-intelligence__tip--insight {
+  border-left-color: var(--status-info);
+}
+.ds-lead-intelligence__tip-icon {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-tertiary);
+}
+.ds-lead-intelligence__tip--do .ds-lead-intelligence__tip-icon {
+  color: var(--status-success);
+}
+.ds-lead-intelligence__tip--dont .ds-lead-intelligence__tip-icon {
+  color: var(--status-error);
+}
+.ds-lead-intelligence__tip--insight .ds-lead-intelligence__tip-icon {
+  color: var(--status-info);
+}
+.ds-lead-intelligence__tip-content {
+  flex: 1;
+}
+.ds-lead-intelligence__tip-text {
+  font-size: var(--font-size-sm);
+  color: var(--text-primary);
+  display: block;
+}
+.ds-lead-intelligence__tip-detail {
+  font-size: var(--font-size-xs);
+  color: var(--text-tertiary);
+  display: block;
+  margin-top: var(--space-1);
+}
+.ds-lead-intelligence__card--locked {
+  position: relative;
+  overflow: hidden;
+}
+.ds-lead-intelligence__locked-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-8) var(--space-4);
+  text-align: center;
+  min-height: 150px;
+}
+.ds-lead-intelligence__locked-icon {
+  color: var(--text-tertiary);
+  margin-bottom: var(--space-3);
+  opacity: 0.5;
+}
+.ds-lead-intelligence__locked-text {
+  font-size: var(--font-size-sm);
+  color: var(--text-tertiary);
+  margin: 0;
+}
+.ds-lead-intelligence__locked-shimmer {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(
+      90deg,
+      transparent 0%,
+      var(--glass-base-hover) 50%,
+      transparent 100%);
+  animation: ds-shimmer 2s infinite;
+}
+@keyframes ds-shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+.ds-mbti {
+  background: var(--glass-base);
+  backdrop-filter: var(--glass-backdrop);
+  border: 1px solid var(--rim-light-bottom);
+  border-top-color: var(--rim-light-top);
+  border-radius: var(--radius-card);
+  padding: var(--space-5);
+  box-shadow: var(--glass-shadow-combined);
+}
+.ds-mbti__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-5);
+}
+.ds-mbti__title {
+  font-size: var(--font-size-xs);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-wide);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-secondary);
+  margin: 0;
+}
+.ds-mbti__type-badge {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-bold);
+  padding: var(--space-1) var(--space-3);
+  background:
+    linear-gradient(
+      135deg,
+      rgba(var(--accent-rgb), 0.2) 0%,
+      rgba(var(--accent2-rgb), 0.2) 100%);
+  border-radius: var(--radius-badge);
+  color: var(--text-primary);
+  letter-spacing: var(--letter-spacing-widest);
+}
+.ds-mbti__dimensions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+}
+.ds-mbti__row {
+  display: grid;
+  grid-template-columns: 100px 1fr 100px auto;
+  gap: var(--space-3);
+  align-items: center;
+  position: relative;
+  padding: var(--space-2);
+  margin: calc(var(--space-2) * -1);
+  border-radius: var(--radius-button);
+  transition: background var(--transition-fast);
+}
+.ds-mbti__row--hovered {
+  background: var(--glass-base-hover);
+}
+.ds-mbti__label {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-0-5);
+}
+.ds-mbti__label--left {
+  text-align: right;
+  align-items: flex-end;
+}
+.ds-mbti__label--right {
+  text-align: left;
+  align-items: flex-start;
+}
+.ds-mbti__label-text {
+  font-size: var(--font-size-sm);
+  color: var(--text-tertiary);
+  transition: color var(--transition-fast);
+}
+.ds-mbti__label--active .ds-mbti__label-text {
+  color: var(--text-primary);
+  font-weight: var(--font-weight-medium);
+}
+.ds-mbti__label-strength {
+  font-size: var(--font-size-xs);
+  color: var(--text-tertiary);
+  opacity: 0.7;
+}
+.ds-mbti__track-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+.ds-mbti__track {
+  height: 8px;
+  background: var(--glass-highlight-subtle);
+  border-radius: var(--radius-pill);
+  position: relative;
+  overflow: visible;
+}
+.ds-mbti__track-center {
+  position: absolute;
+  left: 50%;
+  top: -2px;
+  bottom: -2px;
+  width: 2px;
+  background: var(--glass-highlight-medium);
+  transform: translateX(-50%);
+}
+.ds-mbti__track-fill {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  border-radius: var(--radius-pill);
+  transition: all 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.ds-mbti__row--purple .ds-mbti__track-fill {
+  background:
+    linear-gradient(
+      90deg,
+      var(--data-purple),
+      var(--data-purple-light));
+  box-shadow: 0 0 12px var(--data-purple-glow);
+}
+.ds-mbti__row--yellow .ds-mbti__track-fill {
+  background:
+    linear-gradient(
+      90deg,
+      var(--data-yellow),
+      var(--data-yellow-light));
+  box-shadow: 0 0 12px var(--data-yellow-glow);
+}
+.ds-mbti__row--pink .ds-mbti__track-fill {
+  background:
+    linear-gradient(
+      90deg,
+      var(--data-pink),
+      var(--data-pink-light));
+  box-shadow: 0 0 12px var(--data-pink-glow);
+}
+.ds-mbti__row--blue .ds-mbti__track-fill {
+  background:
+    linear-gradient(
+      90deg,
+      var(--data-blue),
+      var(--data-blue-light));
+  box-shadow: 0 0 12px var(--data-blue-glow);
+}
+.ds-mbti__thumb {
+  position: absolute;
+  top: 50%;
+  width: 16px;
+  height: 16px;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+  transition: left 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.ds-mbti__thumb::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--hc-control-knob);
+  border-radius: 50%;
+  box-shadow: var(--shadow-sm), 0 0 0 2px var(--glass-highlight-bright);
+}
+.ds-mbti__thumb-glow {
+  position: absolute;
+  inset: -4px;
+  border-radius: 50%;
+  background:
+    radial-gradient(
+      circle,
+      var(--glass-highlight-strong) 0%,
+      transparent 70%);
+  opacity: 0;
+  transition: opacity var(--transition-fast);
+}
+.ds-mbti__row:hover .ds-mbti__thumb-glow {
+  opacity: 1;
+}
+.ds-mbti__dimension-label {
+  font-size: var(--font-size-xs);
+  color: var(--text-tertiary);
+  text-align: center;
+}
+.ds-mbti__info-button {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  color: var(--text-tertiary);
+  cursor: pointer;
+  border-radius: 50%;
+  transition: all var(--transition-fast);
+  opacity: 0;
+}
+.ds-mbti__row:hover .ds-mbti__info-button {
+  opacity: 1;
+}
+.ds-mbti__info-button:hover {
+  background: var(--surface-alpha-2);
+  color: var(--text-secondary);
+}
+.ds-mbti__tooltip {
+  position: absolute;
+  top: calc(100% + var(--space-2));
+  left: 50%;
+  transform: translateX(-50%);
+  width: 320px;
+  padding: var(--space-4);
+  background: var(--glass-base);
+  backdrop-filter: blur(20px);
+  border: 1px solid var(--rim-light-top);
+  border-radius: var(--radius-card);
+  box-shadow: var(--glass-shadow-elevated-combined);
+  z-index: var(--z-tooltip);
+  animation: ds-tooltip-enter 200ms ease-out;
+}
+@keyframes ds-tooltip-enter {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+.ds-mbti__tooltip-description {
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+  margin: 0 0 var(--space-3);
+}
+.ds-mbti__tooltip-traits {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.ds-mbti__tooltip-trait {
+  font-size: var(--font-size-xs);
+  color: var(--text-tertiary);
+  line-height: var(--line-height-relaxed);
+}
+.ds-mbti__tooltip-trait strong {
+  color: var(--text-secondary);
+}
+.ds-mbti--locked .ds-mbti__header {
+  opacity: 0.6;
+}
+.ds-mbti__locked-badge {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--font-size-xs);
+  color: var(--text-tertiary);
+}
+.ds-mbti__locked-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+.ds-mbti__row--locked {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+.ds-mbti__label--skeleton {
+  width: 80px;
+  height: 14px;
+  background: var(--surface-alpha-1);
+  border-radius: var(--radius-badge);
+}
+.ds-mbti__track--skeleton {
+  flex: 1;
+  height: 8px;
+  background: var(--surface-alpha-1);
+  border-radius: var(--radius-pill);
+  position: relative;
+  overflow: hidden;
+}
+.ds-mbti__skeleton-shimmer {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(
+      90deg,
+      transparent 0%,
+      var(--surface-alpha-1) 50%,
+      transparent 100%);
+  animation: ds-shimmer 2s infinite;
+}
+.ds-behavioral {
+  background: var(--glass-base);
+  backdrop-filter: var(--glass-backdrop);
+  border: 1px solid var(--rim-light-bottom);
+  border-top-color: var(--rim-light-top);
+  border-radius: var(--radius-card);
+  padding: var(--space-5);
+  box-shadow: var(--glass-shadow-combined);
+}
+.ds-behavioral__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-4);
+}
+.ds-behavioral__title {
+  font-size: var(--font-size-xs);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-wide);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-secondary);
+  margin: 0;
+}
+.ds-behavioral__locked-badge {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--font-size-xs);
+  color: var(--text-tertiary);
+}
+.ds-behavioral__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: var(--space-4);
+}
+.ds-behavioral__item {
+  display: flex;
+  gap: var(--space-3);
+  padding: var(--space-3);
+  background: var(--glass-base);
+  border-radius: var(--radius-button);
+}
+.ds-behavioral__item-icon {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(var(--accent-rgb), 0.1);
+  border-radius: var(--radius-button);
+  color: rgb(var(--accent-rgb));
+  flex-shrink: 0;
+}
+.ds-behavioral__item-content {
+  flex: 1;
+  min-width: 0;
+}
+.ds-behavioral__item-label {
+  font-size: var(--font-size-xs);
+  color: var(--text-tertiary);
+  display: block;
+  margin-bottom: var(--space-0-5);
+}
+.ds-behavioral__item-value {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--text-primary);
+  display: block;
+  margin-bottom: var(--space-0-5);
+}
+.ds-behavioral__item-description {
+  font-size: var(--font-size-xs);
+  color: var(--text-tertiary);
+  display: block;
+  line-height: var(--line-height-normal);
+}
+.ds-behavioral__risk-meter {
+  margin-top: var(--space-1);
+}
+.ds-behavioral__risk-track {
+  height: 6px;
+  background: var(--surface-alpha-2);
+  border-radius: var(--radius-pill);
+  overflow: hidden;
+  margin-bottom: var(--space-1);
+}
+.ds-behavioral__risk-fill {
+  height: 100%;
+  border-radius: var(--radius-pill);
+  transition: width var(--transition-slow);
+}
+.ds-behavioral__risk-fill--low {
+  background: var(--status-info);
+}
+.ds-behavioral__risk-fill--medium {
+  background: var(--status-warning);
+}
+.ds-behavioral__risk-fill--high {
+  background: var(--status-error);
+}
+.ds-behavioral__risk-label {
+  font-size: var(--font-size-xs);
+  color: var(--text-tertiary);
+}
+.ds-behavioral__item--skeleton {
+  height: 80px;
+  background: var(--glass-base);
+  position: relative;
+  overflow: hidden;
+}
+.ds-behavioral__item-shimmer {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(
+      90deg,
+      transparent 0%,
+      var(--glass-base-hover) 50%,
+      transparent 100%);
+  animation: ds-shimmer 2s infinite;
+}
+.ds-deep-dive {
+  border-top: 1px solid var(--rim-light-bottom);
+  padding-top: var(--space-2);
+}
+.ds-deep-dive__trigger {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-4) var(--space-2);
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+  font-family: var(--font-family);
+  cursor: pointer;
+  border-radius: var(--radius-button);
+  transition: all var(--transition-fast);
+}
+.ds-deep-dive__trigger:hover {
+  background: var(--glass-base-hover);
+  color: var(--text-primary);
+}
+.ds-deep-dive__trigger-text {
+  font-weight: var(--font-weight-medium);
+}
+.ds-deep-dive__trigger-icon {
+  color: var(--text-tertiary);
+  transition: transform var(--transition-base);
+}
+.ds-deep-dive--expanded .ds-deep-dive__trigger-icon {
+  transform: rotate(180deg);
+}
+.ds-deep-dive__content {
+  padding: var(--space-4) 0;
+  animation: ds-expand-enter 300ms ease-out;
+}
+@keyframes ds-expand-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.ds-deep-dive__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: var(--space-4);
+}
+.ds-deep-dive__card {
+  background: var(--glass-base);
+  backdrop-filter: var(--glass-backdrop);
+  border: 1px solid var(--rim-light-bottom);
+  border-top-color: var(--rim-light-top);
+  border-radius: var(--radius-card);
+  padding: var(--space-5);
+  box-shadow: var(--glass-shadow-combined);
+}
+.ds-deep-dive__card--wide {
+  grid-column: 1 / -1;
+}
+.ds-deep-dive__card--insights {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+}
+.ds-deep-dive__section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+.ds-deep-dive__section-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--text-secondary);
+}
+.ds-deep-dive__section-header--success {
+  color: var(--status-success);
+}
+.ds-deep-dive__section-header--warning {
+  color: var(--status-warning);
+}
+.ds-deep-dive__section-title {
+  font-size: var(--font-size-xs);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-wide);
+  font-weight: var(--font-weight-semibold);
+  margin: 0;
+}
+.ds-deep-dive__list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+.ds-deep-dive__list-item {
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+  padding-left: var(--space-4);
+  position: relative;
+}
+.ds-deep-dive__list-item::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 8px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--text-tertiary);
+}
+.ds-deep-dive__section-header--success + .ds-deep-dive__list .ds-deep-dive__list-item::before {
+  background: var(--status-success);
+}
+.ds-deep-dive__section-header--warning + .ds-deep-dive__list .ds-deep-dive__list-item::before {
+  background: var(--status-warning);
+}
+.ds-deep-dive__timeline {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+.ds-deep-dive__timeline-item {
+  display: flex;
+  gap: var(--space-3);
+  position: relative;
+}
+.ds-deep-dive__timeline-item:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  left: 19px;
+  top: 44px;
+  bottom: -16px;
+  width: 2px;
+  background: var(--surface-alpha-2);
+}
+.ds-deep-dive__timeline-item--current::after {
+  background:
+    linear-gradient(
+      180deg,
+      rgba(var(--accent-rgb), 0.5) 0%,
+      var(--surface-alpha-2) 100%);
+}
+.ds-deep-dive__timeline-icon {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface-alpha-1);
+  border-radius: var(--radius-button);
+  color: var(--text-tertiary);
+  flex-shrink: 0;
+}
+.ds-deep-dive__timeline-item--current .ds-deep-dive__timeline-icon {
+  background: rgba(var(--accent-rgb), 0.15);
+  color: rgb(var(--accent-rgb));
+}
+.ds-deep-dive__timeline-logo {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-button);
+  object-fit: contain;
+  background: var(--hc-control-knob);
+  flex-shrink: 0;
+}
+.ds-deep-dive__timeline-content {
+  flex: 1;
+  min-width: 0;
+}
+.ds-deep-dive__timeline-title {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+  margin: 0 0 var(--space-0-5);
+}
+.ds-deep-dive__timeline-subtitle {
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+  margin: 0;
+}
+.ds-deep-dive__timeline-date {
+  font-size: var(--font-size-xs);
+  color: var(--text-tertiary);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-top: var(--space-0-5);
+}
+.ds-deep-dive__current-badge {
+  display: inline-flex;
+  padding: var(--space-0-5) var(--space-2);
+  background: rgba(var(--accent-rgb), 0.15);
+  color: rgb(var(--accent-rgb));
+  border-radius: var(--radius-badge);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+}
+.ds-deep-dive__narrative {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-relaxed);
+  color: var(--text-secondary);
+  margin: 0;
+}
+.ds-lead-profile__partial-notice {
+  padding: var(--space-4);
+  background: rgba(var(--accent-rgb), 0.05);
+  border: 1px solid rgba(var(--accent-rgb), 0.15);
+  border-radius: var(--radius-card);
+  text-align: center;
+}
+.ds-lead-profile__partial-notice-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-3);
+}
+.ds-lead-profile__partial-notice-text {
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+}
+.ds-lead-profile__partial-notice-progress {
+  width: 200px;
+  height: 4px;
+  background: var(--surface-alpha-2);
+  border-radius: var(--radius-pill);
+  overflow: hidden;
+}
+.ds-lead-profile__partial-notice-bar {
+  height: 100%;
+  width: 60%;
+  background:
+    linear-gradient(
+      90deg,
+      rgb(var(--accent-rgb)),
+      rgb(var(--accent2-rgb)));
+  border-radius: var(--radius-pill);
+  animation: ds-partial-progress 2s ease-in-out infinite;
+}
+@keyframes ds-partial-progress {
+  0%, 100% {
+    transform: translateX(-20%);
+  }
+  50% {
+    transform: translateX(20%);
+  }
+}
+@media (max-width: 640px) {
+  .ds-lead-profile {
+    padding: var(--space-4);
+    gap: var(--space-6);
+  }
+  .ds-lead-identity {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+  .ds-lead-identity__content {
+    align-items: center;
+  }
+  .ds-lead-identity__name-row {
+    justify-content: center;
+  }
+  .ds-lead-identity__meta {
+    justify-content: center;
+  }
+  .ds-lead-identity__actions {
+    justify-content: center;
+  }
+  .ds-lead-intelligence__grid {
+    grid-template-columns: 1fr;
+  }
+  .ds-mbti__row {
+    grid-template-columns: 70px 1fr 70px auto;
+  }
+  .ds-mbti__label-text {
+    font-size: var(--font-size-xs);
+  }
+  .ds-behavioral__grid {
+    grid-template-columns: 1fr;
+  }
+  .ds-deep-dive__grid {
+    grid-template-columns: 1fr;
+  }
+}
+/*# sourceMappingURL=index.css.map */