:root {
  --motion-fast: 180ms;
  --motion-base: 280ms;
  --motion-slow: 420ms;
  --motion-celebration: 760ms;
  --motion-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-soft: cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-accent: #00F0FF;
  --motion-accent-soft: rgba(0, 240, 255, 0.18);
  --motion-card-lift: 0 18px 44px rgba(0, 240, 255, 0.12);
}

html.motion-enabled {
  scroll-behavior: smooth;
}

body.motion-first-entry::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background:
    radial-gradient(circle at 50% 30%, rgba(0, 240, 255, 0.18), transparent 45%),
    linear-gradient(110deg, rgba(0, 240, 255, 0.14), transparent 35%, rgba(255, 255, 255, 0.06) 55%, transparent 75%);
  opacity: 0;
  animation: motionHeroSweep var(--motion-celebration) var(--motion-ease-standard) forwards;
}

.motion-fade-up {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity var(--motion-base) var(--motion-ease-standard),
    transform var(--motion-base) var(--motion-ease-standard);
  will-change: transform, opacity;
}

.motion-fade-up.motion-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.motion-scale-in {
  opacity: 0;
  transform: scale(0.985);
  transition:
    opacity var(--motion-base) var(--motion-ease-standard),
    transform var(--motion-base) var(--motion-ease-emphasis);
  will-change: transform, opacity;
}

.motion-scale-in.motion-in {
  opacity: 1;
  transform: scale(1);
}

.motion-stagger-group > * {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity var(--motion-base) var(--motion-ease-standard),
    transform var(--motion-base) var(--motion-ease-standard);
  transition-delay: calc(var(--motion-stagger-index, 0) * 55ms);
  will-change: transform, opacity;
}

.motion-stagger-group.motion-in > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.motion-card-interactive,
.motion-button-interactive,
.sync-nav-btn {
  transform: translateZ(0);
  transition:
    transform var(--motion-fast) var(--motion-ease-soft),
    box-shadow var(--motion-fast) var(--motion-ease-soft),
    border-color var(--motion-fast) var(--motion-ease-soft),
    background-color var(--motion-fast) var(--motion-ease-soft),
    color var(--motion-fast) var(--motion-ease-soft);
  will-change: transform;
}

.motion-card-interactive:active,
.motion-button-interactive:active,
.sync-nav-btn:active {
  transform: scale(0.985);
}

.motion-card-interactive:focus-visible {
  transform: translate3d(0, -2px, 0) scale(1.01);
  box-shadow: var(--motion-card-lift);
}

.motion-button-interactive:focus-visible {
  box-shadow: 0 10px 26px rgba(0, 240, 255, 0.12);
}

@media (hover: hover) and (pointer: fine) {
  .motion-card-interactive:hover {
    transform: translate3d(0, -2px, 0) scale(1.01);
    box-shadow: var(--motion-card-lift);
  }

  .motion-button-interactive:hover {
    box-shadow: 0 10px 26px rgba(0, 240, 255, 0.12);
  }
}

.motion-glow-pulse {
  animation: motionGlowPulse 960ms var(--motion-ease-standard);
}

.motion-sweep {
  position: relative;
  overflow: hidden;
}

.motion-sweep::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.03) 30%, rgba(0, 240, 255, 0.18) 50%, rgba(255, 255, 255, 0.05) 65%, transparent 100%);
  transform: translate3d(-112%, 0, 0);
  animation: motionSweep 720ms var(--motion-ease-standard);
  pointer-events: none;
}

.motion-success-flash {
  animation: motionSuccessFlash 760ms var(--motion-ease-standard);
}

.motion-celebrate-strong {
  animation: motionCelebrateStrong 920ms var(--motion-ease-emphasis);
}

.motion-score-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.24);
  color: #d8fbff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.motion-score-tag.caution {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.82);
}

.app-status-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 20px;
}

.app-status-card {
  position: relative;
  min-width: 0;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(10, 16, 24, 0.94), rgba(8, 12, 20, 0.92));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
}

.app-status-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(0, 240, 255, 0.06), transparent 42%, rgba(255, 255, 255, 0.02));
  opacity: 0.9;
}

.app-status-card[data-tone="active"] {
  border-color: rgba(0, 240, 255, 0.22);
  box-shadow: 0 18px 44px rgba(0, 240, 255, 0.08);
}

.app-status-card[data-tone="warning"] {
  border-color: rgba(244, 197, 66, 0.22);
}

.app-status-card[data-tone="strong"] {
  border-color: rgba(0, 240, 255, 0.18);
}

.app-status-label-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.app-status-kicker {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
}

.app-status-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.74);
  font-size: 11px;
  font-weight: 700;
}

.app-status-chip[data-tone="active"] {
  border-color: rgba(0, 240, 255, 0.2);
  background: rgba(0, 240, 255, 0.1);
  color: #d8fbff;
}

.app-status-chip[data-tone="warning"] {
  border-color: rgba(244, 197, 66, 0.2);
  background: rgba(244, 197, 66, 0.1);
  color: #f8e7aa;
}

.app-status-chip[data-tone="strong"] {
  border-color: rgba(0, 240, 255, 0.18);
  color: #d8fbff;
}

.app-status-title,
.app-status-detail,
.app-status-facts,
.app-status-actions {
  position: relative;
  z-index: 1;
}

.app-status-title {
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}

.app-status-detail {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.45;
}

.app-status-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.app-status-fact {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.app-status-progress {
  margin-top: 12px;
}

.app-status-progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.app-status-progress-track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.app-status-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(0, 240, 255, 0.55), rgba(0, 240, 255, 0.95));
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.14);
}

.app-status-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.app-status-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(0, 240, 255, 0.14);
  background: rgba(0, 240, 255, 0.08);
  color: #d8fbff;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.app-status-action.secondary {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.86);
}

.app-status-action[disabled] {
  opacity: 0.68;
  cursor: wait;
}

.app-status-meta {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}

.app-status-recovery {
  position: relative;
  z-index: 1;
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.03);
}

.app-status-recovery-title {
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.app-status-recovery-copy {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  line-height: 1.5;
}

.app-status-recovery-steps {
  margin: 8px 0 0;
  padding-left: 18px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  line-height: 1.5;
}

.app-status-recovery-steps li + li {
  margin-top: 4px;
}

.product-empty-state {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(10, 16, 24, 0.9), rgba(6, 10, 18, 0.94));
}

.product-empty-title {
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}

.product-empty-copy {
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.55;
}

.product-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.product-empty-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(0, 240, 255, 0.18);
  background: rgba(0, 240, 255, 0.1);
  color: #d8fbff;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.product-empty-action.secondary {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.84);
}

.onboarding-checklist {
  margin: 0 0 20px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(31, 41, 55, 0.9);
  background:
    radial-gradient(circle at top right, rgba(0, 240, 255, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(10, 16, 24, 0.95), rgba(8, 12, 20, 0.92));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

.onboarding-checklist.compact {
  padding: 16px;
}

.onboarding-checklist.compact .onboarding-title {
  font-size: 19px;
}

.onboarding-checklist.compact .onboarding-copy {
  max-width: none;
}

.onboarding-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}

.onboarding-kicker {
  color: rgba(0, 240, 255, 0.78);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.onboarding-title {
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.15;
}

.onboarding-copy {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.5;
  max-width: 720px;
}

.onboarding-progress {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0, 240, 255, 0.16);
  background: rgba(0, 240, 255, 0.08);
  color: #d8fbff;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.onboarding-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.onboarding-step {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: start;
  min-width: 0;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(5, 10, 18, 0.82);
}

.onboarding-step[data-state="complete"] {
  border-color: rgba(34, 197, 94, 0.18);
  background: rgba(34, 197, 94, 0.06);
}

.onboarding-step[data-state="current"] {
  border-color: rgba(0, 240, 255, 0.18);
  background: rgba(0, 240, 255, 0.07);
}

.onboarding-step-index {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  font-weight: 900;
}

.onboarding-step[data-state="complete"] .onboarding-step-index {
  border-color: rgba(34, 197, 94, 0.24);
  background: rgba(34, 197, 94, 0.14);
  color: #bbf7d0;
}

.onboarding-step[data-state="current"] .onboarding-step-index {
  border-color: rgba(0, 240, 255, 0.22);
  background: rgba(0, 240, 255, 0.12);
  color: #d8fbff;
}

.onboarding-step-title {
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
}

.onboarding-step-copy {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  line-height: 1.45;
}

.onboarding-step-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.76);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.onboarding-step[data-state="complete"] .onboarding-step-badge {
  border-color: rgba(34, 197, 94, 0.22);
  background: rgba(34, 197, 94, 0.10);
  color: #bbf7d0;
}

.onboarding-step[data-state="current"] .onboarding-step-badge {
  border-color: rgba(0, 240, 255, 0.18);
  background: rgba(0, 240, 255, 0.10);
  color: #d8fbff;
}

.onboarding-step-action {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(0, 240, 255, 0.16);
  background: rgba(0, 240, 255, 0.08);
  color: #d8fbff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
}

.onboarding-complete-copy {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.5;
}

.onboarding-complete-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.first-week-guide {
  margin: 0 0 22px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at top left, rgba(0, 240, 255, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(10, 16, 24, 0.95), rgba(8, 12, 20, 0.94));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
}

.first-week-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.first-week-kicker {
  color: rgba(0, 240, 255, 0.78);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.first-week-title {
  color: #ffffff;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.15;
}

.first-week-copy {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.55;
  max-width: 720px;
}

.first-week-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0, 240, 255, 0.16);
  background: rgba(0, 240, 255, 0.08);
  color: #d8fbff;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.first-week-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.first-week-card {
  min-width: 0;
  padding: 15px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(5, 10, 18, 0.82);
}

.first-week-card-title {
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
}

.first-week-card-copy {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 1.5;
}

.first-week-card-action {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(0, 240, 255, 0.16);
  background: rgba(0, 240, 255, 0.08);
  color: #d8fbff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
}

.dashboard-education {
  margin: 0 0 22px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(0, 240, 255, 0.12);
  background:
    radial-gradient(circle at top left, rgba(0, 240, 255, 0.08), transparent 38%),
    linear-gradient(180deg, rgba(10, 16, 24, 0.96), rgba(8, 12, 20, 0.94));
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
}

.dashboard-education-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.dashboard-education-kicker {
  color: rgba(0, 240, 255, 0.78);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dashboard-education-title {
  margin-top: 6px;
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
}

.dashboard-education-copy {
  margin-top: 8px;
  max-width: 780px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 14px;
  line-height: 1.6;
}

.dashboard-education-badge {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.dashboard-education-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.dashboard-education-card {
  min-width: 0;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.dashboard-education-card-kicker {
  color: rgba(255, 255, 255, 0.54);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dashboard-education-card-title {
  margin-top: 8px;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
}

.dashboard-education-card-copy {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.55;
}

.dashboard-education-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.dashboard-education-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(0, 240, 255, 0.18);
  background: rgba(0, 240, 255, 0.1);
  color: #d8fbff;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.dashboard-education-action.secondary {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.84);
}

.enhanced-date-backdrop {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.76);
  backdrop-filter: blur(10px);
}

.enhanced-date-sheet {
  width: min(460px, 100%);
  border-radius: 24px;
  border: 1px solid rgba(0, 240, 255, 0.14);
  background:
    radial-gradient(circle at top right, rgba(0, 240, 255, 0.1), transparent 34%),
    linear-gradient(180deg, rgba(10, 16, 24, 0.98), rgba(5, 8, 14, 0.98));
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
  padding: 20px;
}

.enhanced-date-kicker {
  color: rgba(0, 240, 255, 0.8);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.enhanced-date-title {
  margin-top: 8px;
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.15;
}

.enhanced-date-copy {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.55;
}

.enhanced-date-input {
  width: 100%;
  margin-top: 16px;
  min-height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(0, 240, 255, 0.18);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  padding: 0 14px;
  font-size: 16px;
  color-scheme: dark;
}

.enhanced-date-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.enhanced-date-action {
  flex: 1;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(0, 240, 255, 0.18);
  background: rgba(0, 240, 255, 0.1);
  color: #d8fbff;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.enhanced-date-action.primary {
  background: #00F0FF;
  color: #000;
  border-color: #00F0FF;
}

@media (max-width: 640px) {
  .enhanced-date-backdrop {
    align-items: flex-end;
    padding: 0;
  }

  .enhanced-date-sheet {
    width: 100%;
    border-radius: 24px 24px 0 0;
    padding: 18px;
  }

  .enhanced-date-actions {
    flex-direction: column-reverse;
  }
}

.coach-translation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.coach-translation-card {
  min-width: 0;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(8, 12, 20, 0.92), rgba(6, 10, 18, 0.96));
}

.coach-translation-kicker {
  color: rgba(0, 240, 255, 0.78);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.coach-translation-title {
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}

.coach-translation-body {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.55;
}

.metric-evidence-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.72);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
}

.metric-evidence-pill.strong {
  border-color: rgba(0, 240, 255, 0.18);
  background: rgba(0, 240, 255, 0.10);
  color: #d8fbff;
}

.metric-evidence-pill.soft {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.76);
}

.metric-evidence-pill.warn {
  border-color: rgba(244, 197, 66, 0.18);
  background: rgba(244, 197, 66, 0.10);
  color: #f7e9b1;
}

.motion-modal-surface,
.modal,
.modal-card {
  transform-origin: center bottom;
}

.modal-backdrop,
.modal-overlay,
#editModal {
  transition: opacity var(--motion-fast) var(--motion-ease-soft);
}

.modal-backdrop .modal,
.modal-overlay .modal,
#editModal .modal-card {
  opacity: 0;
  transform: translate3d(0, 22px, 0) scale(0.985);
  transition:
    opacity var(--motion-base) var(--motion-ease-standard),
    transform var(--motion-base) var(--motion-ease-standard);
}

.modal-backdrop.open .modal,
.modal-overlay.open .modal,
#editModal.open .modal-card {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

@media (max-width: 1024px) {
  .app-status-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .app-status-card {
    padding: 14px;
  }

  .app-status-title {
    font-size: 17px;
  }

  .app-status-actions,
  .product-empty-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .app-status-action,
  .product-empty-action {
    width: 100%;
  }

  .onboarding-header {
    flex-direction: column;
  }

  .onboarding-steps {
    grid-template-columns: 1fr;
  }

  .coach-translation-grid {
    grid-template-columns: 1fr;
  }

  .first-week-header {
    flex-direction: column;
  }

  .first-week-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-education-header {
    flex-direction: column;
  }

  .dashboard-education-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-education-action {
    width: 100%;
  }
}

@keyframes motionGlowPulse {
  0% {
    box-shadow: 0 0 0 rgba(0, 240, 255, 0);
    border-color: inherit;
  }
  45% {
    box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.18), 0 0 36px rgba(0, 240, 255, 0.22);
    border-color: rgba(0, 240, 255, 0.45);
  }
  100% {
    box-shadow: 0 0 0 rgba(0, 240, 255, 0);
    border-color: inherit;
  }
}

@keyframes motionSweep {
  from {
    transform: translate3d(-112%, 0, 0);
  }
  to {
    transform: translate3d(112%, 0, 0);
  }
}

@keyframes motionSuccessFlash {
  0% {
    box-shadow: 0 0 0 rgba(0, 240, 255, 0);
    transform: scale(1);
  }
  35% {
    box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.2), 0 0 26px rgba(0, 240, 255, 0.18);
    transform: scale(1.015);
  }
  100% {
    box-shadow: 0 0 0 rgba(0, 240, 255, 0);
    transform: scale(1);
  }
}

@keyframes motionCelebrateStrong {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(0, 240, 255, 0);
  }
  28% {
    transform: scale(1.035);
    box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.18), 0 0 28px rgba(0, 240, 255, 0.2);
  }
  55% {
    transform: scale(1.02);
    box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.12), 0 0 18px rgba(0, 240, 255, 0.12);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(0, 240, 255, 0);
  }
}

@keyframes motionHeroSweep {
  0% {
    opacity: 0;
    transform: scale(1.02);
  }
  20% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.motion-enabled {
    scroll-behavior: auto;
  }

  body.motion-first-entry::before,
  .motion-glow-pulse,
  .motion-sweep::after,
  .motion-success-flash,
  .motion-celebrate-strong {
    animation: none !important;
  }

  .motion-fade-up,
  .motion-scale-in,
  .motion-stagger-group > *,
  .modal-backdrop .modal,
  .modal-overlay .modal,
  #editModal .modal-card,
  .motion-card-interactive,
  .motion-button-interactive,
  .sync-nav-btn {
    transform: none !important;
    transition: opacity var(--motion-fast) linear, box-shadow var(--motion-fast) linear, border-color var(--motion-fast) linear, background-color var(--motion-fast) linear, color var(--motion-fast) linear !important;
  }

  .motion-fade-up,
  .motion-scale-in,
  .motion-stagger-group > * {
    opacity: 1 !important;
  }

  .motion-fade-up.motion-in,
  .motion-scale-in.motion-in,
  .motion-stagger-group.motion-in > * {
    opacity: 1 !important;
  }
}